Added Export button component

src/components/ExportButton.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import Button from '@mui/material/Button'
+import Papa from 'papaparse'
+import { Vehicle } from '@/utils/types'
+import { Box, Tooltip, Typography } from '@mui/material'
+
+interface ExportButtonProps {
+    vehicle: Vehicle
+}
+
+const ExportButton: React.FC<ExportButtonProps> = ({ vehicle }) => {
+    const handleExport = () => {
+        const data = vehicle.journalEntries.map(entry => ({
+            Service: entry.service,
+            Mileage: entry.mileage,
+            Date: entry.date,
+            Notes: entry.notes,
+            Parts: entry.parts,
+            Tools: entry.tools,
+            Spent: entry.spent,
+            Future: entry.future,
+        }))
+        const csv = Papa.unparse(data)
+        const blob = new Blob([csv], { type: 'text/csv' })
+        const url = URL.createObjectURL(blob)
+        const link = document.createElement('a')
+        link.href = url
+        link.download = `${vehicle.name}.csv`
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+    }
+
+    return (
+        <Box sx={{m:1}}>
+            <Tooltip title='Export all journal entries for this vehicle to a CSV file. The file will be named after the vehicle.'>
+                <Button variant='contained' color='info' onClick={handleExport}>
+                    <Typography variant='overline' >Export</Typography>
+                </Button>
+            </Tooltip>
+        </Box>
+    )
+}
+
+export default ExportButton

src/components/SelectedVehicle.tsx

@@ -6,6 +6,7 @@ import { JournalEntry, Vehicle } from '@/utils/types'
 import EditVehicle from '@/components/Forms/EditVehicle'
 import AddJournalEntry from './Forms/AddJournalEntry'
 import ImportButton from '@/components/ImportButton'
+import ExportButton from '@/components/ExportButton'
 import JournalEntryCard from '@/components/JournalEntryCard'
 import SpentChart from '@/components/SpentChart'
 import TimelineChart from '@/components/TimelineChart'
@@ -148,6 +149,7 @@ const SelectedVehicle: React.FC<SelectedVehicleProps> = ({ vehicle, onEdit, onDe
             </Typography>
             <Box display='flex' flexWrap='wrap' justifyContent='center' >
                 <ImportButton vehicle={vehicle} onImport={onEdit} />
+                <ExportButton vehicle={vehicle} />
                 <AddJournalEntry vehicle={vehicle} onAddEntry={onEdit} />
             </Box>
             <Tabs value={tab} variant='fullWidth' sx={{pt: 1}} TabIndicatorProps={{ style: { display: 'none' } }} onChange={handleTabChange}>