51 lines
1.3 KiB
JavaScript
51 lines
1.3 KiB
JavaScript
// FilterModal.jsx
|
|
import React, { useState } from "react";
|
|
import { IconButton, Dialog, DialogTitle, DialogContent, Box } from "@mui/material";
|
|
import { X, SlidersHorizontal } from "lucide-react";
|
|
import FilterForm from "./FilterForm";
|
|
|
|
const FilterModal = () => {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const handleOpen = () => setOpen(true);
|
|
const handleClose = () => setOpen(false);
|
|
|
|
return (
|
|
<>
|
|
{/* Filter Icon Button (place this in your page header / toolbar) */}
|
|
<IconButton
|
|
onClick={handleOpen}
|
|
aria-label="open filters"
|
|
color="primary"
|
|
size="large"
|
|
>
|
|
<SlidersHorizontal size={22} />
|
|
</IconButton>
|
|
|
|
{/* Modal */}
|
|
<Dialog
|
|
open={open}
|
|
onClose={handleClose}
|
|
fullWidth
|
|
maxWidth="lg" // adjust: "sm" | "md" | "lg"
|
|
>
|
|
<DialogTitle sx={{background:"#f5fbff"}}>
|
|
<Box display="flex" alignItems="center" justifyContent="space-between">
|
|
<span>Filter Options</span>
|
|
<IconButton onClick={handleClose} aria-label="close">
|
|
<X size={20} />
|
|
</IconButton>
|
|
</Box>
|
|
</DialogTitle>
|
|
|
|
<DialogContent dividers>
|
|
{/* Use your existing FilterForm here */}
|
|
<FilterForm />
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default FilterModal;
|