117 lines
4.5 KiB
JavaScript
117 lines
4.5 KiB
JavaScript
"use client";
|
|
|
|
import React, { useContext } from "react";
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
CarouselNext,
|
|
CarouselPrevious,
|
|
} from "@/components/ui/carousel";
|
|
import Link from "next/link";
|
|
import ProductContext from "@/app/contexts/productContext";
|
|
import { backendUrl } from "@/utils/axios";
|
|
import Image from "next/image";
|
|
import { motion } from "framer-motion";
|
|
import { ArrowRight } from "lucide-react";
|
|
|
|
const EnhancedSlider = () => {
|
|
const { category, products } = useContext(ProductContext);
|
|
|
|
const selectedCategories = category?.slice(0, 2);
|
|
const categorizedProducts = selectedCategories?.map((cat) => ({
|
|
category: cat,
|
|
products: products
|
|
?.filter((product) => product.product_category?.id === cat.id)
|
|
.slice(0, 6),
|
|
}));
|
|
|
|
const trimText = (text = "", max) =>
|
|
text.length > max ? text.slice(0, max) + "…" : text;
|
|
|
|
|
|
return (
|
|
<section className="bg-gradient-to-b from-background to-secondary/10 py-16 md:py-24">
|
|
<div className="container mx-auto px-4">
|
|
{categorizedProducts?.map((catData, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: index * 0.2 }}
|
|
className="mb-20 last:mb-0"
|
|
>
|
|
<div className="flex flex-col md:flex-row items-center justify-between mb-8">
|
|
<div className="text-center md:text-left mb-6 md:mb-0">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
|
|
Best-Selling {catData.category?.category_name}
|
|
</h2>
|
|
<Link
|
|
href={`/collections/${catData.category?.id}`}
|
|
className="inline-flex items-center text-primary hover:text-primary/80 transition-colors"
|
|
>
|
|
<span className="text-lg font-medium">
|
|
Explore Collection
|
|
</span>
|
|
<ArrowRight className="ml-2 h-5 w-5" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<Carousel
|
|
opts={{
|
|
align: "start",
|
|
}}
|
|
className="w-full "
|
|
>
|
|
<CarouselContent className="-ml-2 md:-ml-4 p-10">
|
|
{catData.products?.map((product, idx) => (
|
|
<CarouselItem
|
|
key={idx}
|
|
className="pl-2 md:pl-4 md:basis-1/2 lg:basis-1/6"
|
|
>
|
|
<Link href={`/products/${product.id}`}>
|
|
<motion.div
|
|
whileHover={{ y: -5 }}
|
|
className="group rounded-lg overflow-hidden bg-card shadow-lg transition-shadow hover:shadow-xl h-80"
|
|
>
|
|
<div className="aspect-square relative overflow-hidden max-h-[50%] w-full">
|
|
<Image
|
|
src={`${backendUrl}${
|
|
product.images[0]?.image || "/placeholder.jpg"
|
|
}`}
|
|
alt={product.product_name}
|
|
layout="fill"
|
|
objectFit="cover"
|
|
className="transition-transform duration-300 group-hover:scale-110"
|
|
/>
|
|
</div>
|
|
<div className="p-4">
|
|
<h3 className="text-lg font-semibold text-foreground group-hover:text-primary transition-colors">
|
|
{trimText(product.product_name, 30)}
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground mt-2">
|
|
{trimText(
|
|
product.short_description ||
|
|
"Discover more about this product",
|
|
60
|
|
)}
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
</Link>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<CarouselPrevious className="hidden md:flex -left-4 bg-background/50 hover:bg-background text-foreground" />
|
|
<CarouselNext className="hidden md:flex -right-4 bg-background/50 hover:bg-background text-foreground" />
|
|
</Carousel>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default EnhancedSlider;
|