fix text

src/pages/home/Home.tsx

@@ -1,128 +1,132 @@
-import Divider from '@/components/Divider'
-import { usePageTitle } from '@/hooks/usePageTitle'
-import { ArrowLeft, DocumentText } from 'iconsax-react'
-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'
-import { useNavigate } from 'react-router-dom'
-import { Paths } from '@/config/Paths'
-import DirectLogin from '../auth/components/DirectLogin'
-import { clx, extractErrorMessage } from '@/helpers/utils'
+import PdfIcon from "@/assets/images/PDF.svg";
+import Button from "@/components/Button";
+import Divider from "@/components/Divider";
+import Input from "@/components/Input";
+import { toast } from "@/components/Toast";
+import { Paths } from "@/config/Paths";
+import { clx, extractErrorMessage } from "@/helpers/utils";
+import { usePageTitle } from "@/hooks/usePageTitle";
+import { ArrowLeft, DocumentText } from "iconsax-react";
+import { useState, type FC } from "react";
+import { useNavigate } from "react-router-dom";
+import DirectLogin from "../auth/components/DirectLogin";
+import { useCreateCatalog } from "./hooks/useHomeData";
 
 const CATALOG_SIZES = [
-    { id: 'a4', label: 'A4' },
-    { id: 'a3', label: 'A3' },
-    { id: 'a5', label: 'A5' },
-] as const
+  { id: "a4", label: "A4" },
+  { id: "a3", label: "A3" },
+  { id: "a5", label: "A5" },
+] as const;
 
 const Home: FC = () => {
-    usePageTitle('ساخت کاتالوگ')
+  usePageTitle("ساخت کاتالوگ");
 
-    const navigate = useNavigate()
-    const [active, setActive] = useState<string>('a4')
-    const [name, setName] = useState<string>('')
-    const [slug, setSlug] = useState<string>('')
-    const { mutate: createCatalog, isPending } = useCreateCatalog()
+  const navigate = useNavigate();
+  const [active, setActive] = useState<string>("a4");
+  const [name, setName] = useState<string>("");
+  const [slug, setSlug] = useState<string>("");
+  const { mutate: createCatalog, isPending } = useCreateCatalog();
 
   const handleSubmit = () => {
     if (!name) {
-            toast('نام کاتالوگ را وارد کنید', 'error')
+      toast("نام کاتالوگ را وارد کنید", "error");
     } else if (!slug) {
-            toast('اسلاگ کاتالوگ را وارد کنید', 'error')
+      toast("اسلاگ کاتالوگ را وارد کنید", "error");
     } else {
-            createCatalog({ name, slug, size: active, content: '' }, {
+      createCatalog(
+        { name, slug, size: active, content: "" },
+        {
           onSuccess: (data) => {
-                    toast('کاتالوگ با موفقیت ساخته شد', 'success')
-                    navigate(Paths.editor + `/${data?.data?.id}`)
+            toast("کاتالوگ با موفقیت ساخته شد", "success");
+            navigate(Paths.editor + `/${data?.data?.id}`);
           },
           onError: (error) => {
-                    toast(extractErrorMessage(error), 'error')
-                }
-            })
-        }
+            toast(extractErrorMessage(error), "error");
+          },
+        },
+      );
     }
+  };
 
   return (
-        <div className='mt-4 w-full'>
-            <div className='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
-                <h1 className='text-base font-light sm:text-lg'>
-                    ساخت  کاتالوگ ب ویرایشگر داناک
+    <div className="mt-4 w-full">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <h1 className="text-base font-light sm:text-lg">
+          ساخت کاتالوگ به کمک ویرایشگر داناک
         </h1>
         <DirectLogin />
       </div>
 
-            <div className='mt-8 rounded-2xl bg-white p-4 sm:mt-12 sm:rounded-3xl sm:p-6 lg:mt-20 lg:rounded-4xl lg:p-10'>
-                <div className='mx-auto max-w-xl px-1 text-center text-sm leading-relaxed sm:text-base'>
-                    سایز و نام مورد نظر را  انتخاب کنبد و یک کاتالوگ زیبا با ویرایشگر داناک بسازید
+      <div className="mt-8 rounded-2xl bg-white p-4 sm:mt-12 sm:rounded-3xl sm:p-6 lg:mt-20 lg:rounded-4xl lg:p-10">
+        <div className="mx-auto max-w-xl px-1 text-center text-sm leading-relaxed sm:text-base">
+          سایز و نام مورد نظر را انتخاب کنبد و یک کاتالوگ زیبا با ویرایشگر داناک
+          بسازید
         </div>
 
         <div>
-                    <div className='mt-6 flex flex-wrap justify-center gap-4 sm:mt-8 sm:gap-6 lg:gap-8'>
+          <div className="mt-6 flex flex-wrap justify-center gap-4 sm:mt-8 sm:gap-6 lg:gap-8">
             {CATALOG_SIZES.map(({ id, label }) => (
               <button
                 key={id}
-                                type='button'
+                type="button"
                 onClick={() => setActive(id)}
                 className={clx(
-                                    'flex w-full h-[126px] sm:w-[120px] cursor-pointer items-center justify-center rounded-[20px] border border-border sm:h-[146px] sm:w-[140px] lg:h-[166px] lg:w-[160px]',
-                                    active === id && 'border-black!',
+                  "flex w-full h-[126px] sm:w-[120px] cursor-pointer items-center justify-center rounded-[20px] border border-border sm:h-[146px] sm:w-[140px] lg:h-[166px] lg:w-[160px]",
+                  active === id && "border-black!",
                 )}
               >
                 <div>
-                                    <div className='flex size-[72px] items-center justify-center rounded bg-[#EEF0F7] sm:size-[84px] lg:size-[94px]'>
-                                        <DocumentText size={24} color='black' />
-                                    </div>
-                                    <div className='mt-3 text-center text-sm'>
-                                        {label}
+                  <div className="flex size-[72px] items-center justify-center rounded bg-[#EEF0F7] sm:size-[84px] lg:size-[94px]">
+                    <DocumentText size={24} color="black" />
                   </div>
+                  <div className="mt-3 text-center text-sm">{label}</div>
                 </div>
               </button>
             ))}
           </div>
 
-                    <div className='mx-auto mt-5 flex w-full max-w-md flex-col gap-4 px-1 sm:px-0'>
+          <div className="mx-auto mt-5 flex w-full max-w-md flex-col gap-4 px-1 sm:px-0">
             <Input
-                            label='نام کاتالوگ'
+              label="نام کاتالوگ"
               value={name}
               onChange={(e) => setName(e.target.value)}
             />
             <Input
-                            label='اسلاگ'
+              label="اسلاگ"
               value={slug}
               onChange={(e) => setSlug(e.target.value)}
             />
           </div>
 
-                    <div className='flex justify-center'>
-                        <Button disabled={isPending} onClick={handleSubmit} className='mt-6 w-full max-w-md rounded-xl sm:mt-8 sm:w-auto'>
-                            <div className='flex items-center justify-center gap-2'>
+          <div className="flex justify-center">
+            <Button
+              disabled={isPending}
+              onClick={handleSubmit}
+              className="mt-6 w-full max-w-md rounded-xl sm:mt-8 sm:w-auto"
+            >
+              <div className="flex items-center justify-center gap-2">
                 ادامه
-                                <ArrowLeft size={16} color='white' />
+                <ArrowLeft size={16} color="white" />
               </div>
             </Button>
           </div>
         </div>
 
-                <Divider label='یا' className='mt-8 sm:mt-10' />
+        <Divider label="یا" className="mt-8 sm:mt-10" />
 
-                <div className='mt-12 flex justify-center sm:mt-16 lg:mt-20'>
-                    <div className='flex h-[160px] w-[150px] flex-col items-center justify-center rounded-[18px] border sm:h-[193px] sm:w-[183px]'>
-                        <img src={PdfIcon} alt='upload' className='w-10 sm:w-12' />
-                        <div className='mt-3 text-sm'>
-                            آپلود PDF
-                        </div>
+        <div className="mt-12 flex justify-center sm:mt-16 lg:mt-20">
+          <div className="flex h-[160px] w-[150px] flex-col items-center justify-center rounded-[18px] border sm:h-[193px] sm:w-[183px]">
+            <img src={PdfIcon} alt="upload" className="w-10 sm:w-12" />
+            <div className="mt-3 text-sm">آپلود PDF</div>
 
-                        <div className='mt-3 flex h-5 items-center rounded-full bg-[#D4EDDE] px-5 text-[10px] text-[#01973D]'>
+            <div className="mt-3 flex h-5 items-center rounded-full bg-[#D4EDDE] px-5 text-[10px] text-[#01973D]">
               رایگان
             </div>
           </div>
         </div>
       </div>
     </div>
-    )
-}
+  );
+};
 
-export default Home
+export default Home;

src/shared/components/BuyCatalog.tsx

@@ -1,38 +1,40 @@
-import { useState, type FC } from 'react'
-import Button from '@/components/Button'
-import DefaulModal from '@/components/DefaulModal'
-import Input from '@/components/Input'
-import { toast } from '@/components/Toast'
-import { usePurchaseInitate } from '@/pages/catalogue/hooks/useCatalogueData'
-import { extractErrorMessage } from '@/helpers/utils'
+import Button from "@/components/Button";
+import DefaulModal from "@/components/DefaulModal";
+import Input from "@/components/Input";
+import { toast } from "@/components/Toast";
+import { extractErrorMessage } from "@/helpers/utils";
+import { usePurchaseInitate } from "@/pages/catalogue/hooks/useCatalogueData";
+import { useState, type FC } from "react";
 
 const BuyCatalog: FC = () => {
-
-    const [showModal, setShowModal] = useState<boolean>(false)
-    const [count, setCount] = useState<number>(0)
-    const { mutate, isPending } = usePurchaseInitate()
+  const [showModal, setShowModal] = useState<boolean>(false);
+  const [count, setCount] = useState<number>(0);
+  const { mutate, isPending } = usePurchaseInitate();
 
   const handlePurchaseInitate = () => {
     if (count > 0) {
-            mutate({ count: count }, {
+      mutate(
+        { count: count },
+        {
           onSuccess: (data) => {
             console.log(data);
             // TODO منتقل بشه به صفحه صورت حساب
           },
           onError: (error) => {
-                    toast(extractErrorMessage(error), 'error')
-                }
-            })
+            toast(extractErrorMessage(error), "error");
+          },
+        },
+      );
     } else {
-            toast('تعداد را انتخاب کنید')
-        }
+      toast("تعداد را انتخاب کنید");
     }
+  };
 
   return (
-        <div className='px-4'>
-            <div className='flex justify-center'>
-                <Button onClick={() => setShowModal(true)} className='w-fit px-5'>
-                    خرید کاتالو
+    <div className="px-4">
+      <div className="flex justify-center">
+        <Button onClick={() => setShowModal(true)} className="w-fit px-5">
+          خرید کاتالوگ
         </Button>
       </div>
 
@@ -40,24 +42,28 @@ const BuyCatalog: FC = () => {
         open={showModal}
         close={() => setShowModal(false)}
         isHeader
-                title_header='خرید کاتالوگ'
+        title_header="خرید کاتالوگ"
       >
-                <div className='mt-4'>
+        <div className="mt-4">
           <Input
-                        label='تعداد'
-                        type='number'
+            label="تعداد"
+            type="number"
             value={count}
             onChange={(e) => setCount(+e.target.value)}
           />
         </div>
-                <div className='mt-6 flex justify-end'>
-                    <Button disabled={isPending} onClick={handlePurchaseInitate} className='w-fit px-5'>
+        <div className="mt-6 flex justify-end">
+          <Button
+            disabled={isPending}
+            onClick={handlePurchaseInitate}
+            className="w-fit px-5"
+          >
             صدور صورتحساب
           </Button>
         </div>
       </DefaulModal>
     </div>
-    )
-}
+  );
+};
 
-export default BuyCatalog
+export default BuyCatalog;