+ )
+}
+
+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 (
+