import Box from '@mui/material/Box'; import TextField from '@mui/material/TextField'; import MenuItem from '@mui/material/MenuItem'; import { useSearchParams } from 'react-router-dom'; import { Button } from '@mui/material'; const categories = [ { value: '', label: 'Select a category' }, { value: 'beauty', label: 'beauty' }, { value: 'fragrances', label: 'fragrances' }, { value: 'furniture', label: 'furniture' }, { value: 'groceries', label: 'groceries' }, ]; export function Filters() { const [searchParams, setSearchParams] = useSearchParams(); const productNameInputValue = searchParams.get('search'); const stockInputValue = searchParams.get('stock'); const categoryInputValue = searchParams.get('category'); function submitForm(e) { e.preventDefault(); const name = e.currentTarget['search']?.value; const category = e.currentTarget['category']?.value; const stock = e.currentTarget['stock']?.value; handleSearchParams('search', name); handleSearchParams('category', category); handleSearchParams('stock', stock); } function handleSearchParams(key, value) { setSearchParams((state) => { if (value) { state.set(key, value); } else { state.delete(key); } return state; }); } return ( ); }