hamid zarghami
75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
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;
|