create services and hooks create food

src/pages/food/Create.tsx

@@ -9,21 +9,22 @@ import Button from '@/components/Button'
 import { Checkbox } from '@/components/ui/checkbox'
 import CreateFoodSidebar from './components/CreateFoodSidebar'
 import type { CreateFoodType } from './types/Types'
+import { useGetCategories } from './hooks/useFoodData'
 
 
 
 const CreateFood: FC = () => {
+
+    const { data } = useGetCategories();
     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' }
-    ]
+    // تبدیل داده‌های دسته‌ها به فرمت مورد نیاز Select
+    const categories = data?.data?.map(category => ({
+        label: category.title,
+        value: category.id
+    })) || []
 
     const formik = useFormik<CreateFoodType>({
         initialValues: {
@@ -86,7 +87,7 @@ const CreateFood: FC = () => {
                         onClick={() => formik.handleSubmit()}
                     >
                         <div className='flex gap-2 items-center'>
-                            <TickCircle className='size-5' color='black' />
+                            <TickCircle className='size-5' color='white' />
                             <div>ثبت غذا</div>
                         </div>
                     </Button>