create category themee

src/pages/theme/Create.tsx

@@ -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

src/pages/theme/List.tsx

@@ -0,0 +1,31 @@
+import { type FC } from 'react'
+import PageTitle from '@/components/PageTitle'
+import { useGetThemes } from './hooks/useThemeData'
+import Button from '@/components/Button';
+import { Link } from 'react-router-dom';
+import { Pages } from '@/config/Pages';
+import { Plus } from 'lucide-react';
+
+const ThemeList: FC = () => {
+
+    const { data, isLoading } = useGetThemes();
+
+    return (
+        <div>
+            <PageTitle title1='تم ها' />
+
+            <div className='mt-5 flex justify-end'>
+                <Link to={Pages.products.theme.create}>
+                    <Button
+                        className='w-fit px-4 flex gap-2'
+                    >
+                        <Plus color='#fff' size={16} />
+                        <span>افزودن تم</span>
+                    </Button>
+                </Link>
+            </div>
+        </div>
+    )
+}
+
+export default ThemeList

src/pages/theme/enum/Enum.ts

@@ -0,0 +1,4 @@
+export enum ThemeInputType {
+  Color = "color",
+  Text = "text",
+}

src/pages/theme/hooks/useThemeData.ts

@@ -0,0 +1,19 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import * as api from "../service/ThemeService";
+
+export const useGetThemes = () => {
+  return useQuery({
+    queryKey: ["themes"],
+    queryFn: api.getThemes,
+  });
+};
+
+export const useCreateTheme = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: api.createTheme,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["themes"] });
+    },
+  });
+};

src/pages/theme/service/ThemeService.ts

@@ -0,0 +1,12 @@
+import axios from "@/config/axios";
+import type { CreateThemeType } from "../type/Types";
+
+export const getThemes = async () => {
+  const { data } = await axios.get("/admin/category/theme");
+  return data;
+};
+
+export const createTheme = async (params: CreateThemeType) => {
+  const { data } = await axios.post("/admin/category/theme", params);
+  return data;
+};

src/pages/theme/type/Types.ts

@@ -0,0 +1,6 @@
+import type { ThemeInputType } from "../enum/Enum";
+
+export type CreateThemeType = {
+  title: string;
+  inputType: ThemeInputType;
+};