create category themee

2025-11-29 09:28:10 +03:30
parent 15c6d29bb1
commit 259fc8af97
9 changed files with 177 additions and 0 deletions
@@ -0,0 +1,90 @@
+import PageTitle from '@/components/PageTitle'
+import { useFormik } from 'formik'
+import { type FC } from 'react'
+import type { CreateThemeType } from './type/Types'
+import { ThemeInputType } from './enum/Enum'
+import * as Yup from 'yup'
+import Input from '@/components/Input'
+import Select from '@/components/Select'
+import { useCreateTheme } from './hooks/useThemeData'
+import { useNavigate } from 'react-router-dom'
+import { Pages } from '@/config/Pages'
+import { extractErrorMessage } from '@/helpers/utils'
+import { toast } from 'react-toastify'
+import Button from '@/components/Button'
+import { TickCircle } from 'iconsax-react'
+
+const CreateTheme: FC = () => {
+
+    const navigate = useNavigate()
+    const { mutate: createTheme, isPending } = useCreateTheme();
+
+
+    const formik = useFormik<CreateThemeType>({
+        initialValues: {
+            title: '',
+            inputType: ThemeInputType.Color,
+        },
+        validationSchema: Yup.object({
+            title: Yup.string().required('عنوان تم الزامی است'),
+            inputType: Yup.string().required('نوع ورودی تم الزامی است'),
+        }),
+        onSubmit: (values) => {
+            createTheme(values, {
+                onSuccess: () => {
+                    navigate(Pages.products.theme.list)
+                },
+                onError: (error) => {
+                    toast.error(extractErrorMessage(error))
+                }
+            })
+        },
+    })
+
+    return (
+        <div>
+            <PageTitle title1='افزودن تم' />
+
+            <div className='bg-white p-8 rounded-4xl'>
+                <div>
+                    <Input
+                        label='عنوان تم'
+                        placeholder='عنوان تم را وارد کنید'
+                        {...formik.getFieldProps('title')}
+                        error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
+                    />
+                </div>
+
+                <div className='mt-5'>
+                    <Select
+                        label='نوع ورودی تم'
+                        placeholder='انتخاب نوع ورودی تم'
+                        value={formik.values.inputType}
+                        onChange={(e) => formik.setFieldValue('inputType', e.target.value)}
+                        items={[
+                            { value: ThemeInputType.Color, label: 'رنگ' },
+                            { value: ThemeInputType.Text, label: 'متن' },
+                        ]}
+                        error_text={formik.touched.inputType && formik.errors.inputType ? formik.errors.inputType : ''}
+                    />
+                </div>
+
+                <div className='mt-5 flex justify-end'>
+                    <Button
+                        onClick={() => formik.handleSubmit()}
+                        isLoading={isPending}
+                        disabled={!formik.isValid || isPending}
+                        className='w-fit'
+                    >
+                        <div className='flex gap-2 items-center'>
+                            <TickCircle size={16} color='#fff' />
+                            <div>ذخیره</div>
+                        </div>
+                    </Button>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default CreateTheme