52 lines
1.9 KiB
JavaScript
52 lines
1.9 KiB
JavaScript
import React, { useContext } from "react";
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
CarouselNext,
|
|
CarouselPrevious,
|
|
} from "@/components/ui/carousel";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
const CategorySlider = ({ categoryData, products }) => {
|
|
return (
|
|
<div className="w-full sm:w-[70%] p-4">
|
|
<h2 className="capitalize font-serif text-2xl sm:text-4xl font-bold mb-4 sm:mb-7">
|
|
Top Selling {categoryData?.category_name}
|
|
</h2>
|
|
<Carousel className="w-full max-w-full sm:max-w-[90%]">
|
|
<CarouselContent className="-ml-1">
|
|
{products?.slice(0, 3).map((product, index) => (
|
|
<CarouselItem
|
|
key={index}
|
|
className="pl-3 sm:basis-1/2 lg:basis-1/3"
|
|
>
|
|
<Link href={`/products/${product.product_name}`}>
|
|
<div className="p-1">
|
|
<div className="bg-white shadow-md hover:shadow-xl">
|
|
<div className="flex aspect-square items-center justify-center p-8">
|
|
<Image
|
|
src={product.images[0]?.image || "/placeholder.jpg"}
|
|
alt={product.product_name}
|
|
className="hover:scale-105 object-cover object-center transition-all ease-in duration-300" // Tailwind styling
|
|
/>
|
|
</div>
|
|
</div>
|
|
<h2 className="mt-3 text-center text-lg sm:text-xl font-medium">
|
|
{product.product_name}
|
|
</h2>
|
|
</div>
|
|
</Link>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<CarouselPrevious className="text-black hidden sm:flex" />
|
|
<CarouselNext className="text-black hover:bg-[#C19A5B] hidden sm:flex" />
|
|
</Carousel>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CategorySlider;
|