73 lines
1.4 KiB
TypeScript
73 lines
1.4 KiB
TypeScript
import React from "react";
|
|
import {
|
|
Box,
|
|
Button,
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContent,
|
|
Tabs,
|
|
Tab,
|
|
Typography,
|
|
} from "@mui/material";
|
|
|
|
import { useSelector } from "react-redux";
|
|
import { RootState } from "../../redux/reducers";
|
|
type Slot = {
|
|
id: string;
|
|
startTime: string;
|
|
endTime: string;
|
|
isAvailable?: boolean;
|
|
};
|
|
|
|
interface SlotPickerModalProps {
|
|
open: boolean;
|
|
handleClose: () => void;
|
|
selectedSlotId: string | null;
|
|
onSelect: (slot: Slot) => any;
|
|
}
|
|
|
|
|
|
export default function SlotPickerModal({
|
|
open,
|
|
handleClose,
|
|
|
|
selectedSlotId,
|
|
onSelect,
|
|
}: SlotPickerModalProps) {
|
|
const availableSlots = useSelector(
|
|
(state: RootState) => state.slotReducer.availableSlots || []
|
|
);
|
|
// eslint-disable-next-line @typescript-eslint/no-redeclare
|
|
|
|
|
|
|
|
return (
|
|
<Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
|
|
<DialogTitle>Select a Time Slot</DialogTitle>
|
|
<DialogContent>
|
|
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}>
|
|
{availableSlots.map((slot) => {
|
|
const isDisabled = !slot?.isAvailable;
|
|
const label = `${slot?.startTime} - ${slot?.endTime}`;
|
|
return (
|
|
<Button
|
|
key={slot?.id}
|
|
variant={
|
|
selectedSlotId === slot?.id
|
|
? "contained"
|
|
: "outlined"
|
|
}
|
|
color="primary"
|
|
disabled={isDisabled}
|
|
onClick={() => onSelect(slot)}
|
|
>
|
|
{label}
|
|
</Button>
|
|
);
|
|
})}
|
|
</Box>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|