product list

2025-10-20 15:35:25 +03:30
parent dbe37e371e
commit 4b9e797665
10 changed files with 177 additions and 358 deletions
@@ -0,0 +1,102 @@
+import Button from '@/components/Button'
+import Filters from '@/components/Filters'
+import SwitchComponent from '@/components/Switch'
+import Table from '@/components/Table'
+import { AddSquare, Edit, More2 } from 'iconsax-react'
+import { type FC } from 'react'
+
+const ProductList: 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-1.5'>
+                        <AddSquare size={18} color='black' />
+                        <div className='text-[13px] font-light'>محصول جدید</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: 'attribute',
+                            title: 'ویژگی ها',
+                            render: () => {
+                                return (
+                                    <div className='flex text-[#0037FF] gap-2 items-center'>
+                                        <More2 size={18} color='#0037FF' />
+                                        <div className='text-[13px]'>ویژگی ها</div>
+                                    </div>
+                                )
+                            }
+                        },
+                        {
+                            key: 'status',
+                            title: 'وضعیت',
+                            render: () => {
+                                return (
+                                    <SwitchComponent
+                                        active={true}
+                                        onChange={() => { }}
+                                    />
+                                )
+                            }
+                        },
+                        {
+                            key: 'actions',
+                            title: '',
+                            render: () => {
+                                return (
+                                    <Edit size={20} color='#0037FF' />
+                                )
+                            }
+                        },
+                    ]}
+                    data={[
+                        {
+                            id: 1,
+                            title: 'محصول 1',
+                            attribute: 'رنگ: قرمز، سایز: متوسط',
+                            status: 'فعال',
+                        },
+                        {
+                            id: 2,
+                            title: 'محصول 2',
+                            attribute: 'رنگ: آبی، سایز: بزرگ',
+                            status: 'غیرفعال',
+                        }
+                    ]}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default ProductList