create foor

src/components/Select.tsx

@@ -25,7 +25,7 @@ const Select: FC<Props> = (props: Props) => {
                 </label>
             }
             <select {...props} className={clx(
-                'w-full text-black block border appearance-none border-border px-2.5 h-10 text-sm rounded-2.5 bg-gray',
+                'w-full text-black block border appearance-none border-border px-2.5 h-10 text-sm rounded-[10px] bg-gray',
                 props.className,
                 props.label && 'mt-1'
             )}>

src/components/Switch.tsx

@@ -0,0 +1,50 @@
+import { Fragment } from 'react'
+import { Switch } from '@headlessui/react'
+import MoonLoader from 'react-spinners/MoonLoader'
+
+interface Props {
+    active: boolean,
+    onChange: (value: boolean) => void,
+    isLoading?: boolean,
+    label?: string,
+}
+
+const SwitchComponent = (props: Props) => {
+
+    const handleChange = (value: boolean) => {
+        props.onChange(value)
+    }
+
+    if (props.isLoading) {
+        return (
+            <MoonLoader size={20} color='black' className='ml-4' />
+        )
+    }
+
+    return (
+        <div className='dltr w-fit flex gap-2 items-center'>
+            <Switch checked={props.active} onChange={handleChange} as={Fragment}>
+                {({ checked }) => (
+                    <button
+                        className={`${checked ? 'bg-primary' : 'bg-gray-200'
+                            } relative inline-flex h-6 w-11 items-center rounded-full`}
+                    >
+                        <span className="sr-only">Enable notifications</span>
+                        <span
+                            className={`${checked ? 'translate-x-6' : 'translate-x-1'
+                                } inline-block h-4 w-4 transform rounded-full bg-white transition`}
+                        />
+                    </button>
+                )}
+            </Switch>
+            {
+                props.label &&
+                <div className='text-sm'>
+                    : {props.label}
+                </div>
+            }
+        </div>
+    )
+}
+
+export default SwitchComponent

src/index.css

@@ -39,3 +39,7 @@ textarea::placeholder {
   --width-sidebar: 300px;
   --border-radius-2.5: 10px;
 }
+
+.dltr {
+  direction: ltr;
+}

src/pages/food/Create.tsx

@@ -0,0 +1,185 @@
+import { type FC, useState } from 'react'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import { TickCircle } from 'iconsax-react'
+import Input from '@/components/Input'
+import Select from '@/components/Select'
+import Textarea from '@/components/Textarea'
+import Button from '@/components/Button'
+import CreateFoodSidebar from './components/CreateFoodSidebar'
+
+type CreateFoodType = {
+    name: string
+    categoryId: string
+    order: string
+    ingredients: string
+    price: string
+    discountedPrice: string
+    preparationTime: string
+    description: string
+}
+
+const CreateFood: FC = () => {
+    const [isActive, setIsActive] = useState<boolean>(true)
+    const [isSpecial, setIsSpecial] = useState<boolean>(false)
+    const [imageFiles, setImageFiles] = useState<File[]>([])
+
+    // دسته‌بندی‌های نمونه
+    const categories = [
+        { label: 'غذای اصلی', value: '1' },
+        { label: 'پیش غذا', value: '2' },
+        { label: 'دسر', value: '3' },
+        { label: 'نوشیدنی', value: '4' }
+    ]
+
+    const formik = useFormik<CreateFoodType>({
+        initialValues: {
+            name: '',
+            categoryId: '',
+            order: '',
+            ingredients: '',
+            price: '',
+            discountedPrice: '',
+            preparationTime: '',
+            description: ''
+        },
+        validationSchema: Yup.object().shape({
+            name: Yup.string().required('نام غذا الزامی است'),
+            categoryId: Yup.string().required('دسته‌بندی الزامی است'),
+            order: Yup.string().required('ترتیب نمایش الزامی است'),
+            ingredients: Yup.string().required('مواد تشکیل دهنده الزامی است'),
+            price: Yup.string().required('قیمت الزامی است'),
+            preparationTime: Yup.string().required('زمان آماده‌سازی الزامی است')
+        }),
+        onSubmit: async (values) => {
+            console.log('Form values:', {
+                ...values,
+                isActive,
+                isSpecial,
+                images: imageFiles
+            })
+        }
+    })
+
+    return (
+        <div className='w-full mt-4'>
+            <div className='flex w-full justify-between items-center'>
+                <div className='text-xl font-bold'>
+                    غذای جدید
+                </div>
+                <div>
+                    <Button
+                        className='px-5'
+                        onClick={() => formik.handleSubmit()}
+                    >
+                        <div className='flex gap-2 items-center'>
+                            <TickCircle className='size-5' color='black' />
+                            <div>ثبت غذا</div>
+                        </div>
+                    </Button>
+                </div>
+            </div>
+
+            <div className='flex gap-6 mt-6'>
+                <div className='flex-1'>
+                    <div className='bg-white py-8 xl:px-10 px-4 rounded-3xl'>
+                        <Input
+                            label='نام غذا'
+                            name='name'
+                            placeholder=''
+                            value={formik.values.name}
+                            onChange={formik.handleChange}
+                            error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
+                        />
+
+                        <div className='grid grid-cols-2 gap-4 mt-5'>
+                            <Select
+                                items={categories}
+                                label='دسته بندی'
+                                placeholder='انتخاب کنید'
+                                name='categoryId'
+                                value={formik.values.categoryId}
+                                onChange={formik.handleChange}
+                                error_text={formik.touched.categoryId && formik.errors.categoryId ? formik.errors.categoryId : ''}
+                            />
+
+                            <Input
+                                name='order'
+                                label='ترتیب نمایش'
+                                placeholder=''
+                                value={formik.values.order}
+                                onChange={formik.handleChange}
+                                error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
+                            />
+                        </div>
+
+                        <div className='mt-5'>
+                            <Input
+                                name='ingredients'
+                                label='مواد تشکیل دهنده'
+                                placeholder=''
+                                value={formik.values.ingredients}
+                                onChange={formik.handleChange}
+                                error_text={formik.touched.ingredients && formik.errors.ingredients ? formik.errors.ingredients : ''}
+                            />
+                        </div>
+
+                        <div className='grid grid-cols-2 gap-4 mt-5'>
+                            <Input
+                                name='price'
+                                label='قیمت'
+                                placeholder='ریال'
+                                seprator={true}
+                                value={formik.values.price}
+                                onChange={formik.handleChange}
+                                error_text={formik.touched.price && formik.errors.price ? formik.errors.price : ''}
+                            />
+
+                            <Input
+                                name='discountedPrice'
+                                label='قیمت بعد از تخفیف'
+                                placeholder='ریال'
+                                seprator={true}
+                                value={formik.values.discountedPrice}
+                                onChange={formik.handleChange}
+                                error_text={formik.touched.discountedPrice && formik.errors.discountedPrice ? formik.errors.discountedPrice : ''}
+                            />
+                        </div>
+
+                        <div className='mt-5'>
+                            <Input
+                                name='preparationTime'
+                                label='زمان آماده سازی'
+                                placeholder='دقیقه'
+                                value={formik.values.preparationTime}
+                                onChange={formik.handleChange}
+                                error_text={formik.touched.preparationTime && formik.errors.preparationTime ? formik.errors.preparationTime : ''}
+                            />
+                        </div>
+
+                        <div className='mt-5'>
+                            <Textarea
+                                name='description'
+                                label='توضیحات تکمیلی'
+                                placeholder=''
+                                value={formik.values.description}
+                                onChange={formik.handleChange}
+                                error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <CreateFoodSidebar
+                    isActive={isActive}
+                    isSpecial={isSpecial}
+                    onChangeActive={setIsActive}
+                    onChangeSpecial={setIsSpecial}
+                    onChangeImages={setImageFiles}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default CreateFood

src/pages/food/components/CreateFoodSidebar.tsx

@@ -0,0 +1,59 @@
+import { type FC } from 'react'
+import { Add } from 'iconsax-react'
+import { Checkbox } from '@/components/ui/checkbox'
+import UploadBoxDraggble from '@/components/UploadBoxDraggble'
+import SwitchComponent from '@/components/Switch'
+
+type Props = {
+    isActive: boolean
+    isSpecial: boolean
+    onChangeActive: (value: boolean) => void
+    onChangeSpecial: (value: boolean) => void
+    onChangeImages: (files: File[]) => void
+}
+
+const CreateFoodSidebar: FC<Props> = (props: Props) => {
+    return (
+        <div className='bg-white w-[300px] text-xs h-fit px-5 py-7 rounded-3xl'>
+            <div className='flex items-center justify-between'>
+                <div className='text-sm font-bold'>ثبت غذا</div>
+                <button className='flex items-center justify-center w-8 h-8 bg-black rounded-lg'>
+                    <Add size={20} color='white' />
+                </button>
+            </div>
+
+            <div className='mt-8'>
+                <div className='flex items-center justify-between'>
+                    <div>وضعیت سرویس</div>
+                    <SwitchComponent
+                        active
+                        onChange={(value) => props.onChangeActive(value)}
+                    />
+                </div>
+            </div>
+
+            <div className='mt-6'>
+                <div className='flex items-start gap-2'>
+                    <Checkbox
+                        checked={props.isSpecial}
+                        onCheckedChange={(checked) => props.onChangeSpecial(checked as boolean)}
+                    />
+                    <label className='text-xs leading-tight cursor-pointer'>
+                        این غذا پیشنهاد ویژه رستوران هست.
+                    </label>
+                </div>
+            </div>
+
+            <div className='mt-8'>
+                <div className='text-sm mb-2'>تصاویر غذا</div>
+                <UploadBoxDraggble
+                    label='تصویر غذا را آپلود کنید'
+                    isMultiple={true}
+                    onChange={(files: File[]) => props.onChangeImages(files)}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default CreateFoodSidebar

src/router/Main.tsx

@@ -7,6 +7,7 @@ import { clx } from '../helpers/utils'
 import { useSharedStore } from '../shared/store/sharedStore'
 import FoodsList from '@/pages/food/List'
 import { Pages } from '@/config/Pages'
+import CreateFood from '@/pages/food/Create'
 
 const MainRouter: FC = () => {
 
@@ -26,6 +27,7 @@ const MainRouter: FC = () => {
                     <div className='pb-20'>
                         <Routes>
                             <Route path={Pages.foods.list} element={<FoodsList />} />
+                            <Route path={Pages.foods.add} element={<CreateFood />} />
                         </Routes>
                     </div>
                 </div>