create product

2025-10-21 10:53:02 +03:30
parent d1c12f5f79
commit 75ef90802f
6 changed files with 249 additions and 3 deletions
@@ -0,0 +1,118 @@
+import Button from '@/components/Button'
+import GridWrapper from '@/components/GridWrapper';
+import Input from '@/components/Input';
+import { Checkbox } from '@/components/ui/checkbox';
+import UploadBox from '@/components/UploadBox';
+import { clx } from '@/helpers/utils';
+import { AddSquare } from 'iconsax-react'
+import { type FC } from 'react'
+
+const CreateProduct: 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 bg-white p-6 rounded-3xl '>
+                <div className='font-light'>
+                    اطلاعات محصول
+                </div>
+
+                <div className='mt-6 rowTwoInput'>
+                    <Input
+                        label='عنوان محصول'
+                        name='title'
+                        onChange={() => { }}
+                    />
+                    <Input
+                        label='لینک در وبسایت'
+                        name='title'
+                        onChange={() => { }}
+                    />
+                </div>
+
+                <div className='mt-6'>
+                    <UploadBox
+                        label='تصویر محصول'
+                        onChange={() => { }}
+                    />
+                </div>
+
+                <div className='mt-6'>
+                    <div>بسته تعداد</div>
+                    <div className='mt-2.5 flex gap-4'>
+                        <div className='h-8 w-[72px] text-sm rounded-lg border border-[#C3C7DD] flex items-center justify-center'>100</div>
+                        <div className='h-8 w-[72px] text-sm rounded-lg border border-[#C3C7DD] flex items-center justify-center'>100</div>
+                        <div className='h-8 w-[72px] text-sm rounded-lg border border-[#C3C7DD] flex items-center justify-center'>100</div>
+                        <div className={clx(
+                            'h-8 w-[72px] text-sm rounded-lg border border-[#C3C7DD] flex items-center justify-center',
+                            'border-primary '
+                        )}>100</div>
+                    </div>
+                </div>
+            </div>
+
+            <div className='mt-8 bg-white p-6 rounded-3xl '>
+                <h1 className='font-light text-lg'>
+                    ویژگی های محصول
+                </h1>
+
+                <div className='mt-6'>
+                    <GridWrapper
+                        desktop={5}
+                        mobile={2}
+
+                    >
+                        <div className='flex gap-2 items-center'>
+                            <Checkbox
+                            />
+                            <div className='text-sm font-light'>نوع روکش</div>
+                        </div>
+                        <div className='flex gap-2 items-center'>
+                            <Checkbox
+                            />
+                            <div className='text-sm font-light'>نوع روکش</div>
+                        </div>
+                        <div className='flex gap-2 items-center'>
+                            <Checkbox
+                            />
+                            <div className='text-sm font-light'>نوع روکش</div>
+                        </div>
+                        <div className='flex gap-2 items-center'>
+                            <Checkbox
+                            />
+                            <div className='text-sm font-light'>نوع روکش</div>
+                        </div>
+                        <div className='flex gap-2 items-center'>
+                            <Checkbox
+                            />
+                            <div className='text-sm font-light'>نوع روکش</div>
+                        </div>
+                        <div className='flex gap-2 items-center'>
+                            <Checkbox
+                            />
+                            <div className='text-sm font-light'>نوع روکش</div>
+                        </div>
+                        <div className='flex gap-2 items-center'>
+                            <Checkbox
+                            />
+                            <div className='text-sm font-light'>نوع روکش</div>
+                        </div>
+                    </GridWrapper>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CreateProduct;