110 lines
2.9 KiB
TypeScript
110 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Button from '@mui/material/Button';
|
|
import Divider from '@mui/material/Divider';
|
|
import Drawer from '@mui/material/Drawer';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Stack from '@mui/material/Stack';
|
|
import Typography from '@mui/material/Typography';
|
|
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
|
|
import { X as XIcon } from '@phosphor-icons/react/dist/ssr/X';
|
|
|
|
import { useMediaQuery } from '@/hooks/use-media-query';
|
|
|
|
import { FleetVehicles } from './fleet-vehicles';
|
|
import type { Vehicle } from './types';
|
|
|
|
export interface SidebarProps {
|
|
currentVehicleId?: string;
|
|
onClose?: () => void;
|
|
onVehicleDeselect?: () => void;
|
|
onVehicleSelect?: (vehicleId: string) => void;
|
|
open?: boolean;
|
|
vehicles: Vehicle[];
|
|
}
|
|
|
|
export function Sidebar({
|
|
currentVehicleId,
|
|
onClose,
|
|
onVehicleDeselect,
|
|
onVehicleSelect,
|
|
open,
|
|
vehicles,
|
|
}: SidebarProps): React.JSX.Element {
|
|
const mdUp = useMediaQuery('up', 'md');
|
|
|
|
const content = (
|
|
<SidebarContent
|
|
currentVehicleId={currentVehicleId}
|
|
onClose={onClose}
|
|
onVehicleDeselect={onVehicleDeselect}
|
|
onVehicleSelect={onVehicleSelect}
|
|
vehicles={vehicles}
|
|
/>
|
|
);
|
|
|
|
if (mdUp) {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
borderRight: '1px solid var(--mui-palette-divider)',
|
|
display: { xs: 'none', md: 'block' },
|
|
flex: '0 0 auto',
|
|
width: '320px',
|
|
}}
|
|
>
|
|
{content}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Drawer PaperProps={{ sx: { maxWidth: '100%', width: '320px' } }} onClose={onClose} open={open}>
|
|
{content}
|
|
</Drawer>
|
|
);
|
|
}
|
|
|
|
export interface SidebarContentProps {
|
|
currentVehicleId?: string;
|
|
onClose?: () => void;
|
|
onVehicleDeselect?: () => void;
|
|
onVehicleSelect?: (vehicleId: string) => void;
|
|
vehicles: Vehicle[];
|
|
}
|
|
|
|
function SidebarContent({
|
|
currentVehicleId,
|
|
onClose,
|
|
onVehicleDeselect,
|
|
onVehicleSelect,
|
|
vehicles,
|
|
}: SidebarContentProps): React.JSX.Element {
|
|
return (
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
|
|
<Stack spacing={1} sx={{ flex: '0 0 auto', p: 2 }}>
|
|
<Stack direction="row" spacing={2} sx={{ alignItems: 'flex-center', justifyContent: 'space-between' }}>
|
|
<Typography variant="h5">Fleet</Typography>
|
|
<IconButton onClick={onClose} sx={{ display: { md: 'none' } }}>
|
|
<XIcon />
|
|
</IconButton>
|
|
</Stack>
|
|
<Button startIcon={<PlusIcon />} variant="contained">
|
|
Add vehicle
|
|
</Button>
|
|
</Stack>
|
|
<Divider />
|
|
<Box sx={{ flex: '1 1 auto', overflowY: 'auto' }}>
|
|
<FleetVehicles
|
|
currentVehicleId={currentVehicleId}
|
|
onVehicleDeselect={onVehicleDeselect}
|
|
onVehicleSelect={onVehicleSelect}
|
|
vehicles={vehicles}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|