hamid zarghami
71 lines
2.7 KiB
TypeScript
71 lines
2.7 KiB
TypeScript
import { cn } from "@/app/lib/cn";
|
||
import bannersImage from "@/assets/images/best-sellers/banners.jpg";
|
||
import boxesImage from "@/assets/images/best-sellers/boxes.jpg";
|
||
import businessCardsImage from "@/assets/images/best-sellers/business-cards.jpg";
|
||
import calendarsImage from "@/assets/images/best-sellers/calendars.jpg";
|
||
import catalogsImage from "@/assets/images/best-sellers/catalogs.png";
|
||
import { ArrowLeft } from "iconsax-reactjs";
|
||
import Image, { type StaticImageData } from "next/image";
|
||
import { type FC } from "react";
|
||
|
||
type CategoryItem = {
|
||
title: string;
|
||
image: StaticImageData;
|
||
featured?: boolean;
|
||
};
|
||
|
||
const categories: CategoryItem[] = [
|
||
{ title: "جعبه ها", image: boxesImage, featured: true },
|
||
{ title: "کاتالوگ ها", image: catalogsImage },
|
||
{ title: "کارت ویزیت", image: businessCardsImage },
|
||
{ title: "تقویم ها", image: calendarsImage },
|
||
{ title: "بنرها", image: bannersImage },
|
||
];
|
||
|
||
type CategoryTileProps = {
|
||
title: string;
|
||
image: StaticImageData;
|
||
featured?: boolean;
|
||
};
|
||
|
||
const CategoryTile: FC<CategoryTileProps> = ({ title, image, featured }) => {
|
||
return (
|
||
<div
|
||
className={cn(
|
||
"relative overflow-hidden rounded-[24px] sm:rounded-[40px]",
|
||
featured ? "col-span-2 row-span-2 min-h-[220px] sm:min-h-0" : "aspect-square",
|
||
)}
|
||
>
|
||
<Image src={image} alt={title} fill className="object-cover" sizes={featured ? "(max-width: 768px) 100vw, 50vw" : "(max-width: 768px) 50vw, 25vw"} />
|
||
<div
|
||
className={cn(
|
||
"absolute inset-x-3 bottom-3 sm:inset-x-4 sm:bottom-4 flex items-center justify-between rounded-2xl sm:rounded-3xl bg-[#0A1B2C]/60 backdrop-blur-[2px]",
|
||
featured ? "px-4 py-3 sm:px-6 sm:py-3.5" : "px-3 py-2.5 sm:px-5 sm:py-3",
|
||
)}
|
||
>
|
||
<div className={cn("text-white font-bold", featured ? "text-base sm:text-lg" : "text-sm sm:text-base")}>{title}</div>
|
||
<div className="flex items-center gap-1.5 text-white">
|
||
<span className={cn("font-bold", featured ? "text-xs sm:text-sm" : "text-xs")}>مشاهده</span>
|
||
<ArrowLeft size={featured ? 20 : 18} color="currentColor" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const BestSellerCategories: FC = () => {
|
||
return (
|
||
<div className="mt-12 px-4 sm:mt-16 sm:px-8 lg:mt-[120px] lg:px-[120px]">
|
||
<div className="font-bold text-lg sm:text-2xl">دسته بندی های پرفروش</div>
|
||
|
||
<div className="mt-8 sm:mt-12 grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-10">
|
||
{categories.map((category) => (
|
||
<CategoryTile key={category.title} title={category.title} image={category.image} featured={category.featured} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default BestSellerCategories;
|