connect some api
This commit is contained in:
Jelaletdin12
232
features/home/components/ProductCard.tsx
Normal file
232
features/home/components/ProductCard.tsx
Normal file
@@ -0,0 +1,232 @@
|
||||
"use client";
|
||||
|
||||
import { useState, MouseEvent, useEffect, useRef } from "react";
|
||||
import { Heart } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
CarouselNext,
|
||||
CarouselPrevious,
|
||||
type CarouselApi,
|
||||
} from "@/components/ui/carousel";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
type ProductCardProps = {
|
||||
id: number;
|
||||
name: string;
|
||||
price: number | null;
|
||||
struct_price_text: string;
|
||||
discount?: number | null;
|
||||
discount_text?: string | null;
|
||||
images: string[];
|
||||
is_favorite: boolean;
|
||||
labels?: { text: string; bg_color: string }[];
|
||||
price_color?: string;
|
||||
height?: number;
|
||||
width?: number;
|
||||
button?: boolean;
|
||||
};
|
||||
|
||||
export default function ProductCard({
|
||||
id,
|
||||
name,
|
||||
price,
|
||||
struct_price_text,
|
||||
discount,
|
||||
discount_text,
|
||||
images,
|
||||
is_favorite,
|
||||
labels = [],
|
||||
price_color = "#005bff",
|
||||
height = 360,
|
||||
width = 280,
|
||||
button = true,
|
||||
}: ProductCardProps) {
|
||||
const [favorite, setFavorite] = useState(is_favorite);
|
||||
const [api, setApi] = useState<CarouselApi>();
|
||||
const [current, setCurrent] = useState(0);
|
||||
const autoplayRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
const hasMultipleImages = images.length > 1;
|
||||
|
||||
// Track carousel current slide
|
||||
useEffect(() => {
|
||||
if (!api) return;
|
||||
|
||||
setCurrent(api.selectedScrollSnap());
|
||||
|
||||
api.on("select", () => {
|
||||
setCurrent(api.selectedScrollSnap());
|
||||
});
|
||||
}, [api]);
|
||||
|
||||
// Auto-play functionality - 3 seconds
|
||||
useEffect(() => {
|
||||
if (!api || !hasMultipleImages) return;
|
||||
|
||||
const startAutoplay = () => {
|
||||
autoplayRef.current = setInterval(() => {
|
||||
if (api.canScrollNext()) {
|
||||
api.scrollNext();
|
||||
} else {
|
||||
api.scrollTo(0);
|
||||
}
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
const stopAutoplay = () => {
|
||||
if (autoplayRef.current) {
|
||||
clearInterval(autoplayRef.current);
|
||||
autoplayRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
startAutoplay();
|
||||
|
||||
return () => stopAutoplay();
|
||||
}, [api, hasMultipleImages]);
|
||||
|
||||
const handleFavorite = async (e: MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const newFavoriteState = !favorite;
|
||||
setFavorite(newFavoriteState);
|
||||
|
||||
if (newFavoriteState) {
|
||||
toast.success("Товар добавлен в избранное");
|
||||
} else {
|
||||
toast.success("Товар удален из избранного");
|
||||
}
|
||||
};
|
||||
|
||||
const handleCardClick = (e: MouseEvent<HTMLAnchorElement>) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (
|
||||
target.closest('button') ||
|
||||
target.closest('[data-carousel-control="true"]')
|
||||
) {
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
const handleNavClick = (e: MouseEvent, action: () => void) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
action();
|
||||
};
|
||||
|
||||
return (
|
||||
<a
|
||||
href={`/product/${id}`}
|
||||
className="no-underline block"
|
||||
onClick={handleCardClick}
|
||||
>
|
||||
<Card
|
||||
className="relative gap-2 border-none shadow-none p-0 w-full overflow-hidden rounded-2xl hover:shadow-md transition-all cursor-pointer"
|
||||
style={{ height, maxWidth: width }}
|
||||
>
|
||||
{/* Image Section with Carousel */}
|
||||
<div className="relative w-full h-[260px] group">
|
||||
<Carousel
|
||||
opts={{
|
||||
align: "start",
|
||||
loop: true,
|
||||
watchDrag: false, // Disable drag/swipe on desktop
|
||||
}}
|
||||
setApi={setApi}
|
||||
className="w-full h-full"
|
||||
>
|
||||
<CarouselContent className="h-[260px] ml-0">
|
||||
{images.map((image, index) => (
|
||||
<CarouselItem key={index} className="h-[260px] pl-0">
|
||||
<div className="h-full flex items-center justify-center p-2">
|
||||
<img
|
||||
src={image}
|
||||
alt={`${name} - ${index + 1}`}
|
||||
className="max-w-full max-h-full object-contain"
|
||||
draggable="false"
|
||||
/>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
|
||||
{/* Navigation Arrows - Only show if multiple images */}
|
||||
{hasMultipleImages && (
|
||||
<>
|
||||
<CarouselPrevious
|
||||
data-carousel-control="true"
|
||||
className="absolute left-2 opacity-0 group-hover:opacity-100 transition-opacity z-20"
|
||||
onClick={(e) => handleNavClick(e, () => api?.scrollPrev())}
|
||||
/>
|
||||
<CarouselNext
|
||||
data-carousel-control="true"
|
||||
className="absolute right-2 opacity-0 group-hover:opacity-100 transition-opacity z-20"
|
||||
onClick={(e) => handleNavClick(e, () => api?.scrollNext())}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Carousel>
|
||||
|
||||
{/* Favorite Button */}
|
||||
<button
|
||||
onClick={handleFavorite}
|
||||
className="absolute top-3 right-3 z-10 rounded-full bg-white/80 p-2 hover:bg-white transition-all"
|
||||
>
|
||||
{favorite ? (
|
||||
<Heart className="w-5 h-5 text-red-500 fill-red-500" />
|
||||
) : (
|
||||
<Heart className="w-5 h-5 text-gray-700" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Image Indicators */}
|
||||
{hasMultipleImages && (
|
||||
<div className="absolute bottom-2 left-1/2 -translate-x-1/2 z-10 flex gap-1.5">
|
||||
{images.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
data-carousel-control="true"
|
||||
onClick={(e) => handleNavClick(e, () => api?.scrollTo(index))}
|
||||
className={`h-1.5 rounded-full transition-all ${
|
||||
index === current ? "w-6 bg-white" : "w-1.5 bg-white/60"
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Labels */}
|
||||
{labels?.length > 0 && (
|
||||
<div className="absolute top-2 left-2 flex flex-col gap-1 z-10">
|
||||
{labels.map((label, idx) => (
|
||||
<Badge
|
||||
key={idx}
|
||||
className="text-white text-[10px] font-bold uppercase rounded-r-md"
|
||||
style={{ backgroundColor: label.bg_color }}
|
||||
>
|
||||
{label.text}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<CardContent className="p-0 space-y-1">
|
||||
<p
|
||||
className="text-sm font-semibold mx-2"
|
||||
style={{ color: price_color }}
|
||||
>
|
||||
{struct_price_text}
|
||||
</p>
|
||||
<p className="text-gray-800 text-sm truncate mx-2">{name}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user