features

src/config/Paths.tsx

@@ -8,6 +8,9 @@ export const Paths = {
     order: {
         list: '/order/list'
     },
+    features: {
+        list: '/features/list'
+    },
     home: '/home',
     myOrders: '/my-orders',
     proformaInvoice: '/proforma-invoice',

src/pages/Features/List.tsx

@@ -0,0 +1,90 @@
+import Button from '@/components/Button'
+import Filters from '@/components/Filters'
+import SwitchComponent from '@/components/Switch'
+import Table from '@/components/Table'
+import { AddSquare, Edit } from 'iconsax-react'
+import { type FC } from 'react'
+
+const FeaturesList: FC = () => {
+    return (
+        <div className='mt-5'>
+            <div className='flex justify-between'>
+                <h1 className='text-lg font-light'>
+                    ویژگی ها
+                </h1>
+
+                <Button
+                    className='w-fit px-6'
+                >
+                    <div className='flex gap-2 items-center'>
+                        <AddSquare size={18} color='black' />
+                        <div className='text-[13px]'>ویژگی جدید</div>
+                    </div>
+                </Button>
+            </div>
+
+            <div className='mt-8'>
+                <Filters
+                    fields={[
+                        {
+                            name: 'search',
+                            type: 'input',
+                            placeholder: 'جستجو'
+                        }
+                    ]}
+                    onChange={() => { }}
+                />
+            </div>
+
+            <div className='mt-8'>
+                <Table
+                    columns={[
+                        {
+                            key: 'id',
+                            title: 'شماره',
+                        },
+                        {
+                            key: 'title',
+                            title: 'عنوان',
+                        },
+                        {
+                            key: 'items',
+                            title: 'آیتم ها',
+                        },
+                        {
+                            key: 'status',
+                            title: 'وضعیت',
+                            render: () => {
+                                return (
+                                    <SwitchComponent
+                                        active={true}
+                                        onChange={() => { }}
+                                    />
+                                )
+                            }
+                        },
+                        {
+                            key: 'actions',
+                            title: '',
+                            render: () => {
+                                return (
+                                    <Edit size={20} color='#0037FF' />
+                                )
+                            }
+                        },
+                    ]}
+                    data={[
+                        {
+                            id: 1,
+                            title: 'رنگ',
+                            items: 'آبی، سبز، قرمز',
+                            status: 'فعال',
+                        }
+                    ]}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default FeaturesList

src/router/MainRouter.tsx

@@ -8,6 +8,7 @@ import ProformaInvoice from '@/pages/invoice/ProformaInvoice'
 import RequestList from '@/pages/requests/RequestList'
 import ProductList from '@/pages/product/List'
 import OrdersList from '@/pages/order/List'
+import FeaturesList from '@/pages/Features/List'
 
 const MainRouter: FC = () => {
     return (
@@ -26,6 +27,7 @@ const MainRouter: FC = () => {
                             <Route path={Paths.requests.list} element={<RequestList />} />
                             <Route path={Paths.product.list} element={<ProductList />} />
                             <Route path={Paths.order.list} element={<OrdersList />} />
+                            <Route path={Paths.features.list} element={<FeaturesList />} />
                         </Routes>
                     </div>
                 </div>