change design buy catalogue

src/shared/components/BuyCatalog.tsx

@@ -2,10 +2,13 @@ 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 { clx, extractErrorMessage } from "@/helpers/utils";
 import { usePurchaseInitate } from "@/pages/catalogue/hooks/useCatalogueData";
+import { Receipt1 } from "iconsax-react";
 import { useState, type FC } from "react";
 
+const CATALOG_COUNTS = [1, 2, 3, 5, 10];
+
 const BuyCatalog: FC = () => {
   const [showModal, setShowModal] = useState<boolean>(false);
   const [count, setCount] = useState<number>(0);
@@ -44,22 +47,46 @@ const BuyCatalog: FC = () => {
         isHeader
         title_header="خرید کاتالوگ"
       >
-        <div className="mt-4">
+        <div>
-          <Input
+          <div className="mt-8 text-sm">تعداد کاتالوگ مورد نظر را انتخاب کنید</div>
-            label="تعداد"
+          <div className="mt-4 flex flex-wrap gap-4">
-            type="number"
+            {CATALOG_COUNTS.map((item) => (
-            value={count}
+              <div
-            onChange={(e) => setCount(+e.target.value)}
+                key={item}
-          />
+                onClick={() => setCount(item)}
-        </div>
+                className={clx(
-        <div className="mt-6 flex justify-end">
+                  "flex h-10 cursor-pointer items-center rounded-lg border border-[#EBEDF5] bg-[#EBEDF5] px-6 text-xs",
-          <Button
+                  count === item && "border-black",
-            disabled={isPending}
+                )}
-            onClick={handlePurchaseInitate}
+              >
-            className="w-fit px-5"
+                {item} عدد
-          >
+              </div>
-            صدور صورتحساب
+            ))}
-          </Button>
+          </div>
+
+          <div className="mt-8">
+            <Input
+              label="تعداد"
+              className="bg-white/50"
+              type="number"
+              value={count}
+              onChange={(e) => setCount(+e.target.value)}
+            />
+          </div>
+
+          <div className="mt-24 flex justify-end">
+            <Button
+              disabled={isPending}
+              onClick={handlePurchaseInitate}
+              className="w-auto px-8"
+              variant="secondary"
+            >
+              <div className="flex items-center gap-2">
+                <Receipt1 size={18} color="black" />
+                صدور صورتحساب
+              </div>
+            </Button>
+          </div>
         </div>
       </DefaulModal>
     </div>