hamid zarghami
77 lines
2.8 KiB
TypeScript
77 lines
2.8 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 z-50 mt-2 inset-x-4 sm:inset-x-8 lg:inset-x-auto lg:right-[120px] w-auto lg:w-[min(1099px,calc(100vw-240px))] max-h-[70vh] overflow-y-auto rounded-2xl sm:rounded-[32px] bg-[#F9FAFB]/95 backdrop-blur-sm px-4 sm:px-8 pt-6 sm:pt-8 pb-6 sm:pb-10 shadow-lg border border-[#E9EEF2]/80">
|
|
<div className="flex w-full flex-col lg:flex-row items-start justify-between gap-8">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-0 lg:contents w-full lg:w-auto">
|
|
{columns.map((groups) => (
|
|
<div key={groups[0].title} className="flex w-full lg: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-2 sm:px-4 text-sm sm: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-2 sm:px-4 text-right text-sm sm:text-base font-medium text-[#011E3A] transition-colors hover:text-primary"
|
|
>
|
|
{item}
|
|
</button>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="relative mx-auto lg:mx-0 h-[140px] w-[145px] sm:h-[157px] sm:w-[163px] shrink-0 overflow-hidden rounded-2xl">
|
|
<Image src={businessCardMenu} alt="کارت ویزیت" fill className="object-cover" sizes="163px" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AllProductsMenu;
|