diff --git a/src/assets/icons/menu/filter_icon.svg b/src/assets/icons/menu/filter_icon.svg new file mode 100644 index 0000000..791a034 --- /dev/null +++ b/src/assets/icons/menu/filter_icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/pages/AboutUs/index.jsx b/src/pages/AboutUs/index.jsx index 4bbcc13..cfde0dc 100644 --- a/src/pages/AboutUs/index.jsx +++ b/src/pages/AboutUs/index.jsx @@ -107,7 +107,7 @@ const AboutUs = () => { >
{member.name}
diff --git a/src/pages/Menu/components/CategroryFilter.jsx b/src/pages/Menu/components/CategroryFilter.jsx new file mode 100644 index 0000000..6ff300d --- /dev/null +++ b/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 ( +
+
Danh mục món ăn
+ + {Categrories.map((category, index) => ( + + } + onChange={handleSelectCategories} + value={category} + key={category} + label={category} + className='text-primaryText' + /> + ))} + +
+ ) +} +export default CategroryFilter diff --git a/src/pages/Menu/components/DistrictFilter.jsx b/src/pages/Menu/components/DistrictFilter.jsx new file mode 100644 index 0000000..69bc9d9 --- /dev/null +++ b/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 ( +
+
Lọc theo khu vực
+ + {DistrictList.slice(0, showIndex).map((district) => ( + + } + key={district} + label={district} + className='text-primaryText' + /> + ))} + + +
+ ) +} + +export default DistrictFilter diff --git a/src/pages/Menu/components/RestaurantList.jsx b/src/pages/Menu/components/RestaurantList.jsx new file mode 100644 index 0000000..f3a841d --- /dev/null +++ b/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 ( +
+ {Restaurants.map((restaurant) => ( +
+ +
+ ))} +
+ ) +} + +export default RestaurantList diff --git a/src/pages/Menu/index.jsx b/src/pages/Menu/index.jsx new file mode 100644 index 0000000..fbfe738 --- /dev/null +++ b/src/pages/Menu/index.jsx @@ -0,0 +1,317 @@ +import * as React from 'react' +import { useState, useEffect } from 'react' +import RestaurantList from './components/RestaurantList' +import DistrictFilter from './components/DistrictFilter' +import CategroryFilter from './components/CategroryFilter' +import foodCardImg from '~/assets/images/home/food-card.png' +import { SearchBar } from '~/components/ui' +import MenuItem from '@mui/material/MenuItem' +import FormControl from '@mui/material/FormControl' +import Select from '@mui/material/Select' +import Box from '@mui/material/Box' +import Rating from '@mui/material/Rating' +import Typography from '@mui/material/Typography' +import { Button } from '~/components/ui/Button' +import Pagination from '@mui/material/Pagination' + +const Restaurants = [ + { + image: foodCardImg, + rating: '4.5', + restaurant: 'Quán Cô Bảy Chọ', + address: '102 Đường Số 8, P. Bình Trị Đông B, Bình Tân, TP. HCM', + id: 1, + }, + { + image: foodCardImg, + rating: '4.5', + restaurant: 'Quán Cô Bảy Chọ', + address: '102 Đường Số 8, P. Bình Trị Đông B, Bình Tân, TP. HCM', + id: 2, + }, + { + image: foodCardImg, + rating: '4.5', + restaurant: 'Quán Cô Bảy Chọ', + address: '102 Đường Số 8, P. Bình Trị Đông B, Bình Tân, TP. HCM', + id: 3, + }, + { + image: foodCardImg, + rating: '4.5', + restaurant: 'Quán Cô Bảy Chọ', + address: '102 Đường Số 8, P. Bình Trị Đông B, Bình Tân, TP. HCM', + id: 4, + }, + { + image: foodCardImg, + rating: '4.5', + restaurant: 'Quán Cô Bảy Chọ', + address: '102 Đường Số 8, P. Bình Trị Đông B, Bình Tân, TP. HCM', + id: 5, + }, + { + image: foodCardImg, + rating: '4.5', + restaurant: 'Quán Cô Bảy Chọ', + address: '102 Đường Số 8, P. Bình Trị Đông B, Bình Tân, TP. HCM', + id: 6, + }, + { + image: foodCardImg, + rating: '4.5', + restaurant: 'Quán Cô Bảy Chọ', + address: '102 Đường Số 8, P. Bình Trị Đông B, Bình Tân, TP. HCM', + id: 7, + }, + { + image: foodCardImg, + rating: '4.5', + restaurant: 'Quán Cô Bảy Chọ', + address: '102 Đường Số 8, P. Bình Trị Đông B, Bình Tân, TP. HCM', + id: 8, + }, + { + image: foodCardImg, + rating: '4.5', + restaurant: 'Quán Cô Bảy Chọ', + address: '102 Đường Số 8, P. Bình Trị Đông B, Bình Tân, TP. HCM', + id: 9, + }, + { + image: foodCardImg, + rating: '4.5', + restaurant: 'Quán Cô Bảy Chọ', + address: '102 Đường Số 8, P. Bình Trị Đông B, Bình Tân, TP. HCM', + id: 10, + }, + { + image: foodCardImg, + rating: '4.5', + restaurant: 'Quán Cô Bảy Chọ', + address: '102 Đường Số 8, P. Bình Trị Đông B, Bình Tân, TP. HCM', + id: 11, + }, + { + image: foodCardImg, + rating: '4.5', + restaurant: 'Quán Cô Bảy Chọ', + address: '102 Đường Số 8, P. Bình Trị Đông B, Bình Tân, TP. HCM', + id: 12, + }, + { + image: foodCardImg, + rating: '4.5', + restaurant: 'Quán Cô Bảy Chọ', + address: '102 Đường Số 8, P. Bình Trị Đông B, Bình Tân, TP. HCM', + id: 13, + }, + { + image: foodCardImg, + rating: '4.5', + restaurant: 'Quán Cô Bảy Chọ', + address: '102 Đường Số 8, P. Bình Trị Đông B, Bình Tân, TP. HCM', + id: 14, + }, + { + image: foodCardImg, + rating: '4.5', + restaurant: 'Quán Cô Bảy Chọ', + address: '102 Đường Số 8, P. Bình Trị Đông B, Bình Tân, TP. HCM', + id: 15, + }, + { + image: foodCardImg, + rating: '4.5', + restaurant: 'Quán Cô Bảy Chọ', + address: '102 Đường Số 8, P. Bình Trị Đông B, Bình Tân, TP. HCM', + id: 16, + }, + { + image: foodCardImg, + rating: '4.5', + restaurant: 'Quán Cô Bảy Chọ', + address: '102 Đường Số 8, P. Bình Trị Đông B, Bình Tân, TP. HCM', + id: 17, + }, + { + image: foodCardImg, + rating: '4.5', + restaurant: 'Quán Cô Bảy Chọ', + address: '102 Đường Số 8, P. Bình Trị Đông B, Bình Tân, TP. HCM', + id: 18, + }, + { + image: foodCardImg, + rating: '4.5', + restaurant: 'Quán Cô Bảy Chọ', + address: '102 Đường Số 8, P. Bình Trị Đông B, Bình Tân, TP. HCM', + id: 19, + }, + { + image: foodCardImg, + rating: '4.5', + restaurant: 'Quán Cô Bảy Chọ', + address: '102 Đường Số 8, P. Bình Trị Đông B, Bình Tân, TP. HCM', + id: 20, + }, + { + image: foodCardImg, + rating: '4.5', + restaurant: 'Cô Ba', + address: '102 Đường Số 8, P. Bình Trị Đông B, Bình Tân, TP. HCM', + id: 21, + }, + { + image: foodCardImg, + rating: '4.5', + restaurant: 'Cô Ba', + address: '102 Đường Số 8, P. Bình Trị Đông B, Bình Tân, TP. HCM', + id: 22, + }, + { + image: foodCardImg, + rating: '4.5', + restaurant: 'Cô Ba', + address: '102 Đường Số 8, P. Bình Trị Đông B, Bình Tân, TP. HCM', + id: 23, + }, +] +const itemsPerPage = 20 +const Menu = () => { + // hook xử lý select filter quán bán chạy nhất/ quán mới nhất + const [selectedRestaurantFilter, setSelectedRestaurantFilter] = useState('Best seller') + const handleChangeSelect = (event) => { + setSelectedRestaurantFilter(event.target.value) + } + + // hook xử lý filter lọc theo số sao + const [countStar, setCountStart] = useState(5) + + // Hàm xử lý btn delete all + const handleDeleteAll = () => { + setCountStart(0), selectedDistricts.map((district) => (district.isChecked = false)) + setSelectedDistricts([]) + // selectedCategories.map((category) => (category.isChecked) = ) + setSelectedCategories([]) + } + + // xử lý pagination + const [currentPage, setCurrentPage] = useState(1) + const [currentPageData, setCurrentPageData] = useState([]) + + useEffect(() => { + const firstItemIndex = (currentPage - 1) * itemsPerPage + const lastItemIndex = firstItemIndex + itemsPerPage + setCurrentPageData(Restaurants.slice(firstItemIndex, lastItemIndex)) + }, [currentPage, Restaurants]) + + const handlePageChange = (event, page) => { + setCurrentPage(page) + } + + return ( +
+ {/* Thanh Search */} +
+ {/* ================================================= */} +
+
+
+ +
+
+ + + +
+
+
+ + {/* ================================================= */} +
+ {/* Bộ lọc */} +
+
+ +
+ Bộ lọc tìm kiếm +
+
+
+ {/* lọc theo Rating */} +
+ + +
Quán có số sao từ
+
+
+ { + setCountStart(newCountStar) + }} + /> +
trở lên
+
+
+
+ {/* đường line */} +
+ + {/* lọc theo khu vực */} + + + {/* đường line */} +
+ + {/* Lọc theo danh mục món ăn */} + +
+
+ + {/* Kết quả tìm kiếm */} +
+ +
+ +
+
+
+
+
+ ) +} + +export default Menu diff --git a/src/routes/index.js b/src/routes/index.js index 2531cb0..af608bb 100644 --- a/src/routes/index.js +++ b/src/routes/index.js @@ -1,10 +1,12 @@ import Home from '~/pages/Home' import AboutUs from '~/pages/AboutUs' +import Menu from '~/pages/Menu' import SellerRegisterForm from '~/pages/SellerRegisterForm' import { routes } from '~/configs' const publicRoutes = [ { path: routes.HOME, component: Home }, + { path: routes.MENU, component: Menu }, { path: routes.ABOUTUS, component: AboutUs }, { path: routes.SELLER_REGISTER, component: SellerRegisterForm }, ]