mega menu

2026-07-18 10:05:44 +03:30
parent 8ce8400902
commit 28d3d1ae13
3 changed files with 127 additions and 12 deletions
@@ -0,0 +1,74 @@
+import businessCardMenu from "@/assets/images/business-card-menu.png";
+import Image from "next/image";
+import { FC } from "react";
+
+type CategoryGroup = {
+  title: string;
+  items: string[];
+};
+
+const columns: CategoryGroup[][] = [
+  [
+    {
+      title: "کارت‌های استاندارد",
+      items: ["مات", "براق", "بدون روکش"],
+    },
+    {
+      title: "شکل‌های خاص",
+      items: ["گوشه گرد", "مربع", "دایره", "بیضی"],
+    },
+  ],
+  [
+    {
+      title: "کارت‌های پریمیوم",
+      items: ["بافت طبیعی", "مخملی", "پنبه‌ای", "کتانی (Linen)", "کرافت"],
+    },
+    {
+      title: "کارت‌های لوکس",
+      items: ["پریمیوم پلاس", "لبه رنگی", "فوق‌ضخیم", "پلاستیکی"],
+    },
+  ],
+  [
+    {
+      title: "روکش های ویژه",
+      items: ["فویل تزئینی", "برجسته براق", "فویل برجسته"],
+    },
+    {
+      title: "کارت‌های ویزیت دیجیتال",
+      items: ["کارت ویزیت دارای کد QR"],
+    },
+  ],
+];
+
+const AllProductsMenu: FC = () => {
+  return (
+    <div className="absolute top-full right-[120px] z-50 mt-2 w-[1099px] rounded-[32px] bg-[#F9FAFB]/90 px-8 pt-8 pb-10">
+      <div className="flex w-full items-start justify-between">
+        {columns.map((groups) => (
+          <div key={groups[0].title} className="flex w-[228px] shrink-0 flex-col gap-6">
+            {groups.map((group) => (
+              <div key={group.title} className="flex flex-col gap-2">
+                <div className="flex h-10 items-center px-4 text-base font-bold text-black">{group.title}</div>
+                {group.items.map((item) => (
+                  <button
+                    key={item}
+                    type="button"
+                    className="flex h-6 w-full items-center px-4 text-right text-base font-medium text-[#011E3A] transition-colors hover:text-primary"
+                  >
+                    {item}
+                  </button>
+                ))}
+              </div>
+            ))}
+          </div>
+        ))}
+
+        <div className="relative h-[157px] w-[163px] shrink-0 overflow-hidden rounded-2xl">
+          <Image src={businessCardMenu} alt="کارت ویزیت" fill className="object-cover" sizes="163px" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AllProductsMenu;