create catalog

src/pages/home/Home.tsx

@@ -4,10 +4,31 @@ import { useState, type FC } from 'react'
 import PdfIcon from '@/assets/images/PDF.svg'
 import Button from '@/components/Button'
 import Input from '@/components/Input'
+import { toast } from '@/components/Toast'
+import { useCreateCatalog } from './hooks/useHomeData'
 
 const Home: FC = () => {
 
-    const [active, setActive] = useState<string>('')
+    const [active, setActive] = useState<string>('a4')
+    const [name, setName] = useState<string>('')
+    const { mutate: createCatalog, isPending } = useCreateCatalog()
+
+    const handleSubmit = () => {
+        if (!name) {
+            toast('نام کاتالوگ را وارد کنید', 'error')
+        } else {
+            createCatalog({ name: name, size: active, content: '' }, {
+                onSuccess: () => {
+                    toast('کاتالوگ با موفقیت ساخته شد', 'success')
+                },
+                onError: (err) => {
+                    console.log(err);
+
+                    toast('خطا در ساخت کاتالوگ', 'error')
+                }
+            })
+        }
+    }
 
     return (
         <div className='mt-4 w-full'>
@@ -69,11 +90,13 @@ const Home: FC = () => {
                     <div className='mt-5'>
                         <Input
                             label='نام کاتالوگ'
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
                         />
                     </div>
 
                     <div className='flex justify-center'>
-                        <Button className='mt-8 rounded-xl'>
+                        <Button disabled={isPending} onClick={handleSubmit} className='mt-8 rounded-xl'>
                             <div className='flex gap-2 items-center'>
                                 ادامه
                                 <ArrowLeft size={16} color='white' />