fix text

2026-06-01 15:09:56 +03:30
parent 04da87b7d7
commit 8a5cd09172
2 changed files with 182 additions and 172 deletions
@@ -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')
-        } else if (!slug) {
-            toast('اسلاگ کاتالوگ را وارد کنید', 'error')
-        } else {
-            createCatalog({ name, slug, size: active, content: '' }, {
-                onSuccess: (data) => {
-                    toast('کاتالوگ با موفقیت ساخته شد', 'success')
-                    navigate(Paths.editor + `/${data?.data?.id}`)
-                },
-                onError: (error) => {
-                    toast(extractErrorMessage(error), 'error')
-                }
-            })
-        }
+  const handleSubmit = () => {
+    if (!name) {
+      toast("نام کاتالوگ را وارد کنید", "error");
+    } else if (!slug) {
+      toast("اسلاگ کاتالوگ را وارد کنید", "error");
+    } else {
+      createCatalog(
+        { name, slug, size: active, content: "" },
+        {
+          onSuccess: (data) => {
+            toast("کاتالوگ با موفقیت ساخته شد", "success");
+            navigate(Paths.editor + `/${data?.data?.id}`);
+          },
+          onError: (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'>
-                    ساخت  کاتالوگ ب ویرایشگر داناک
-                </h1>
-                <DirectLogin />
-            </div>
+  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">
+          ساخت کاتالوگ به کمک ویرایشگر داناک
+        </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>
-
-                <div>
-                    <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'
-                                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!',
-                                )}
-                            >
-                                <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>
-                                </div>
-                            </button>
-                        ))}
-                    </div>
-
-                    <div className='mx-auto mt-5 flex w-full max-w-md flex-col gap-4 px-1 sm:px-0'>
-                        <Input
-                            label='نام کاتالوگ'
-                            value={name}
-                            onChange={(e) => setName(e.target.value)}
-                        />
-                        <Input
-                            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'>
-                                ادامه
-                                <ArrowLeft size={16} color='white' />
-                            </div>
-                        </Button>
-                    </div>
-                </div>
-
-                <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-3 flex h-5 items-center rounded-full bg-[#D4EDDE] px-5 text-[10px] text-[#01973D]'>
-                            رایگان
-                        </div>
-                    </div>
-                </div>
-            </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>
-    )
-}

-export default Home
+        <div>
+          <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"
+                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!",
+                )}
+              >
+                <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>
+                </div>
+              </button>
+            ))}
+          </div>
+
+          <div className="mx-auto mt-5 flex w-full max-w-md flex-col gap-4 px-1 sm:px-0">
+            <Input
+              label="نام کاتالوگ"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+            <Input
+              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">
+                ادامه
+                <ArrowLeft size={16} color="white" />
+              </div>
+            </Button>
+          </div>
+        </div>
+
+        <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-3 flex h-5 items-center rounded-full bg-[#D4EDDE] px-5 text-[10px] text-[#01973D]">
+              رایگان
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Home;
@@ -1,63 +1,69 @@
-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 }, {
-                onSuccess: (data) => {
-                    console.log(data);
-                    // TODO منتقل بشه به صفحه صورت حساب
-                },
-                onError: (error) => {
-                    toast(extractErrorMessage(error), 'error')
-                }
-            })
-        } else {
-            toast('تعداد را انتخاب کنید')
-        }
+  const handlePurchaseInitate = () => {
+    if (count > 0) {
+      mutate(
+        { count: count },
+        {
+          onSuccess: (data) => {
+            console.log(data);
+            // TODO منتقل بشه به صفحه صورت حساب
+          },
+          onError: (error) => {
+            toast(extractErrorMessage(error), "error");
+          },
+        },
+      );
+    } else {
+      toast("تعداد را انتخاب کنید");
    }
+  };

-    return (
-        <div className='px-4'>
-            <div className='flex justify-center'>
-                <Button onClick={() => setShowModal(true)} className='w-fit px-5'>
-                    خرید کاتالو
-                </Button>
-            </div>
+  return (
+    <div className="px-4">
+      <div className="flex justify-center">
+        <Button onClick={() => setShowModal(true)} className="w-fit px-5">
+          خرید کاتالوگ
+        </Button>
+      </div>

-            <DefaulModal
-                open={showModal}
-                close={() => setShowModal(false)}
-                isHeader
-                title_header='خرید کاتالوگ'
-            >
-                <div className='mt-4'>
-                    <Input
-                        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'>
-                        صدور صورتحساب
-                    </Button>
-                </div>
-            </DefaulModal>
+      <DefaulModal
+        open={showModal}
+        close={() => setShowModal(false)}
+        isHeader
+        title_header="خرید کاتالوگ"
+      >
+        <div className="mt-4">
+          <Input
+            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"
+          >
+            صدور صورتحساب
+          </Button>
+        </div>
+      </DefaulModal>
+    </div>
+  );
+};

-export default BuyCatalog
+export default BuyCatalog;