-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
140 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
101 changes: 101 additions & 0 deletions
101
src/components/BranchManager/Forms/DynamicForm/CategoryForm.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import { FC, useEffect, useState } from 'react'; | ||
| import { z } from 'zod'; | ||
| import { useForm, SubmitHandler } from 'react-hook-form'; | ||
| import { zodResolver } from '@hookform/resolvers/zod'; | ||
| import { XMarkIcon } from '@heroicons/react/24/outline'; | ||
| import { TrashIcon } from '@heroicons/react/24/solid'; | ||
| import ImageInput from '@components/BranchManager/Inputs/ImageInput'; | ||
| import { Button } from '@nextui-org/react'; | ||
| import MultiSelect from '@components/BranchManager/Forms/MultiSelect'; | ||
| import { Category } from '@/types/category'; | ||
| import { toast } from 'react-toastify'; | ||
| import { useNavigate } from 'react-router-dom'; | ||
|
|
||
| const FormSchema = z.object({ | ||
| name: z.string().min(1, { message: 'Category name is required' }), | ||
| description: z.string().optional(), | ||
| }); | ||
|
|
||
| type FormSchemaType = z.infer<typeof FormSchema>; | ||
|
|
||
| function CategoryForm() { | ||
| const Navigate = useNavigate(); | ||
| const { register, handleSubmit, formState } = useForm<FormSchemaType>({ | ||
| resolver: zodResolver(FormSchema), | ||
| }); | ||
|
|
||
| const { errors } = formState; | ||
|
|
||
| useEffect(() => { | ||
| if (Object.keys(errors).length) { | ||
| console.log('Form errors:', errors); | ||
| } | ||
| }, [errors]); | ||
|
|
||
| const onSubmit: SubmitHandler<FormSchemaType> = async (data) => { | ||
| console.log('Form data:', data); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-4"> | ||
| <div className="rounded-lg border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-[#000000]"> | ||
| <div className="border-b border-stroke py-4 px-6.5 dark:border-strokedark"> | ||
| <h3 | ||
| className="font-medium text-xl | ||
| text-black dark:text-white" | ||
| > | ||
| Add Food Categories | ||
| </h3> | ||
| </div> | ||
| <form | ||
| onSubmit={handleSubmit(onSubmit)} | ||
| className="flex flex-col md:flex-row gap-6 max-h-full" | ||
| > | ||
| <div className="w-full space-y-4 p-6.5"> | ||
| <div className="w-full"> | ||
| <label className="mb-3 block text-black dark:text-white"> | ||
| <span className="block mb-1 text-gray-600">Category name</span> | ||
| <input | ||
| className="w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 text-black outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:text-white dark:focus:border-primary" | ||
| type="text" | ||
| {...register('name')} | ||
| /> | ||
| {errors.name && ( | ||
| <p className="text-red-600 mb-1">{errors.name.message}</p> | ||
| )} | ||
| </label> | ||
| <label className="mb-3 block text-black dark:text-white"> | ||
| <span className="block mb-1 text-gray-600"> | ||
| Describe food category | ||
| </span> | ||
| <textarea | ||
| className="w-full h-60 rounded border-[1.5px] border-stroke bg-transparent py-5 px-5 text-black outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:text-white dark:focus:border-primary text-start" | ||
| placeholder="Tell us about this food category..." | ||
| {...register('description')} | ||
| /> | ||
| {errors.description && ( | ||
| <p className="text-red-600 mb-1"> | ||
| {errors.description.message} | ||
| </p> | ||
| )} | ||
| </label> | ||
| <div className="flex justify-center gap-12 mt-16"> | ||
| <Button className="flex w-full justify-center rounded-lg bg-[#b1bfd0] text-white shadow-lg min-w-0 h-16"> | ||
| Cancel | ||
| </Button> | ||
| <Button | ||
| className="flex w-full justify-center rounded-lg bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg min-w-0 h-16" | ||
| type="submit" | ||
| > | ||
| Add Food Category | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default CategoryForm; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import CategoryForm from '@/components/BranchManager/Forms/DynamicForm/CategoryForm'; | ||
|
|
||
| const AddCategories: React.FC = () => { | ||
| return ( | ||
| <> | ||
| <div className="grid grid-cols-1 gap-4 md:grid-cols-1 md:gap-6 xl:grid-cols-1 2xl:gap-7.5"> | ||
| <CategoryForm /> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default AddCategories; |