Feature/menu

src/pages/AboutUs/index.jsx

@@ -107,7 +107,7 @@ const AboutUs = () => {
                 >
                   <div
                     style={{ textShadow: '2px 2px 0 #000' }}
-                    className={`text-accent font-bold text-center mt-auto  leading-[30px] ${styleTextDesc}`}
+                    className={`text-accent font-bold text-center mt-auto leading-[30px] ${styleTextDesc}`}
                   >
                     {member.name}
                   </div>

src/pages/Menu/components/CategroryFilter.jsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import { useState } from 'react'
+import FormGroup from '@mui/material/FormGroup'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Checkbox from '@mui/material/Checkbox'
+
+const Categrories = [
+  'Đồ uống',
+  'Thức ăn nhanh',
+  'Món Á',
+  'Cơm',
+  'Trà sữa',
+  'Món chay',
+  'Bún phở',
+  'Ăn vặt',
+]
+
+const CategroryFilter = () => {
+  const [selectedCategories, setSelectedCategories] = useState([])
+  const handleSelectCategories = (event) => {
+    const isChecked = event.target.checked
+    setSelectedCategories((prevSelected) => {
+      if (isChecked) {
+        return [...prevSelected, event.target.value]
+      } else {
+        return prevSelected.filter((category) => category !== event.target.value)
+      }
+    })
+  }
+  return (
+    <div>
+      <div className='text-[20px] text-primaryText font-bold'>Danh mục món ăn</div>
+      <FormGroup>
+        {Categrories.map((category, index) => (
+          <FormControlLabel
+            control={
+              <Checkbox
+                sx={{
+                  '&.Mui-checked': {
+                    color: '#7D0600',
+                  },
+                }}
+              />
+            }
+            onChange={handleSelectCategories}
+            value={category}
+            key={category}
+            label={category}
+            className='text-primaryText'
+          />
+        ))}
+      </FormGroup>
+    </div>
+  )
+}
+export default CategroryFilter

src/pages/Menu/components/DistrictFilter.jsx

@@ -0,0 +1,75 @@
+import * as React from 'react'
+import { useState } from 'react'
+import FormGroup from '@mui/material/FormGroup'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Checkbox from '@mui/material/Checkbox'
+import { Button } from '@mui/material'
+
+const DistrictList = [
+  'Quận 1',
+  'Quận 3',
+  'Quận 4',
+  'Quận 5',
+  'Quận 6',
+  'Quận 7',
+  'Quận 8',
+  'Quận 10',
+  'Quận 11',
+  'Quận 12',
+  'Quận Tân Bình',
+  'Quận Tân Phú',
+  'Quận Bình Tân',
+  'Quận Bình Thạnh',
+  'Quận Gò Vấp',
+  'Quận Phú Nhuận',
+  'Thành phố Thủ Đức',
+]
+
+const DistrictFilter = () => {
+  const [selectedDistricts, setSelectedDistricts] = useState([])
+  const [showIndex, setShowIndex] = useState(5)
+
+  const handleSelectDistricts = (event) => {
+    const isChecked = event.target.checked
+    const district = event.target.value
+    setSelectedDistricts((prevSelected) =>
+      isChecked ? [...prevSelected, district] : prevSelected.filter((d) => d !== district),
+    )
+  }
+  console.log(selectedDistricts)
+  const handleCollapse = () => {
+    setShowIndex(showIndex === 5 ? DistrictList.length : 5)
+  }
+
+  return (
+    <div>
+      <div className='text-[20px] text-primaryText font-bold'>Lọc theo khu vực</div>
+      <FormGroup>
+        {DistrictList.slice(0, showIndex).map((district) => (
+          <FormControlLabel
+            control={
+              <Checkbox
+                sx={{
+                  '&.Mui-checked': {
+                    color: '#7D0600',
+                  },
+                }}
+                onChange={handleSelectDistricts}
+                value={district}
+                checked={selectedDistricts.includes(district)}
+              />
+            }
+            key={district}
+            label={district}
+            className='text-primaryText'
+          />
+        ))}
+      </FormGroup>
+      <Button onClick={handleCollapse}>
+        <div className='font-bold text-primary'>{showIndex === 5 ? 'Xem thêm...' : 'Thu gọn'}</div>
+      </Button>
+    </div>
+  )
+}
+
+export default DistrictFilter

src/pages/Menu/components/RestaurantList.jsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import RestaurantCard from '~/components/ui/RestaurantCard'
+
+const RestaurantList = ({ Restaurants }) => {
+  return (
+    <div className=' grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 grid-rows-5 gap-10 '>
+      {Restaurants.map((restaurant) => (
+        <div key={restaurant.id}>
+          <RestaurantCard
+            image={restaurant.image}
+            rating={restaurant.rating}
+            restaurant={restaurant.restaurant}
+            address={restaurant.address}
+            id={restaurant.id}
+          />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default RestaurantList