foods list

src/pages/food/List.tsx

@@ -0,0 +1,108 @@
+
+import { type FC } from 'react'
+import Table from '@/components/Table'
+import { Add, Eye } from 'iconsax-react'
+import Button from '@/components/Button'
+
+const FoodsList: FC = () => {
+    return (
+        <div className='mt-5'>
+            <div className='flex justify-between items-center'>
+                <h1 className='text-lg font-light'>لیست غذاها</h1>
+                <Button className='w-fit px-6'>
+                    <div className='flex gap-2 items-center'>
+                        <Add color='#fff' size={20} />
+                        <span>افزودن غذا</span>
+                    </div>
+                </Button>
+            </div>
+
+            <div className='mt-8'>
+                <Table
+                    columns={[
+                        {
+                            key: 'image',
+                            title: 'تصویر',
+                            render: (item) => {
+                                return (
+                                    <div className='w-10 h-10 rounded-full overflow-hidden'>
+                                        <img src={item.image} alt={item.name} className='w-full h-full object-cover' />
+                                    </div>
+                                )
+                            }
+                        },
+                        {
+                            key: 'name',
+                            title: 'نام غذا',
+                        },
+                        {
+                            key: 'category',
+                            title: 'دسته بندی',
+                        },
+                        {
+                            key: 'price',
+                            title: 'قیمت ',
+                        },
+                        {
+                            key: 'preparationTime',
+                            title: 'زمان آماده سازی',
+                        },
+                        {
+                            key: 'status',
+                            title: 'وضعیت',
+                            render: (item) => {
+                                return (
+                                    <div className='h-6 w-fit flex items-center bg-[#FFEDCA] text-[#FF7B00] rounded-full px-2.5 text-xs'>
+                                        {item.status}
+                                    </div>
+                                )
+                            }
+                        },
+                        {
+                            key: 'view',
+                            title: '',
+                            render: () => {
+                                return (
+                                    <div className='flex gap-2 items-center'>
+                                        <Eye size={20} color='#8C90A3' />
+                                    </div>
+                                )
+                            }
+                        },
+                    ]}
+                    data={[
+                        {
+                            id: 1,
+                            image: 'https://picsum.photos/seed/food1/200',
+                            name: 'کباب کوبیده',
+                            category: 'غذای ایرانی',
+                            price: '۱۵۰,۰۰۰ تومان',
+                            preparationTime: '۳۰ دقیقه',
+                            status: 'موجود',
+                        },
+                        {
+                            id: 2,
+                            image: 'https://picsum.photos/seed/food2/200',
+                            name: 'پیتزا پپرونی',
+                            category: 'فست فود',
+                            price: '۲۰۰,۰۰۰ تومان',
+                            preparationTime: '۴۵ دقیقه',
+                            status: 'موجود',
+                        },
+                        {
+                            id: 3,
+                            image: 'https://picsum.photos/seed/food3/200',
+                            name: 'سالاد سزار',
+                            category: 'پیش غذا',
+                            price: '۸۰,۰۰۰ تومان',
+                            preparationTime: '۱۵ دقیقه',
+                            status: 'ناموجود',
+                        }
+                    ]}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default FoodsList

src/router/Main.tsx

@@ -1,10 +1,12 @@
 import { type FC } from 'react'
 import SideBar from '../shared/SideBar'
 import Header from '../shared/Header'
-import { Routes } from 'react-router-dom'
+import { Route, Routes } from 'react-router-dom'
 import Footer from '../shared/Footer'
 import { clx } from '../helpers/utils'
 import { useSharedStore } from '../shared/store/sharedStore'
+import FoodsList from '@/pages/food/List'
+import { Pages } from '@/config/Pages'
 
 const MainRouter: FC = () => {
 
@@ -23,7 +25,7 @@ const MainRouter: FC = () => {
                 )}>
                     <div className='pb-20'>
                         <Routes>
-
+                            <Route path={Pages.foods.list} element={<FoodsList />} />
                         </Routes>
                     </div>
                 </div>