connect some api

2025-11-22 20:59:28 +05:00
parent 4fe0fb3d4e
commit 2857d34f4d
24 changed files with 1233 additions and 893 deletions
--- a/features/home/components/HomePage.tsx
+++ b/features/home/components/HomePage.tsx
@@ -49,7 +49,7 @@ export default function HomePage() {
  const hasMore = collections ? visibleCount < collections.length : false;

  return (
-    <div className="px-4 md:px-8 lg:px-12 pt-8 pb-12 space-y-8">
+    <div className="px-2 md:px-4 lg:px-4 pt-4 pb-12 space-y-8 max-w-[1504px] mx-auto">
      {!carouselsLoading && carouselItems.length > 0 && (
        <HeroCarousel items={carouselItems} />
      )}
--- a/features/home/components/ProductCard.tsx
+++ b/features/home/components/ProductCard.tsx
@@ -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>
+  );
+}
--- a/features/home/components/ProductGrid.tsx
+++ b/features/home/components/ProductGrid.tsx
@@ -2,7 +2,7 @@
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { ChevronRight } from "lucide-react";
-import ProductCard from "@/components/ProductCard";
+import ProductCard from "@/features/home/components/ProductCard";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useCollectionProducts } from "@/lib/hooks";
 import type { Collection } from "@/lib/types/api";
@@ -22,7 +22,6 @@ export default function CollectionSection({ collection, locale }: Props) {
    isError,
  } = useCollectionProducts(collection.id, { enabled: shouldRender });

-  // Determine if section should render based on products
  useEffect(() => {
    if (!isLoading && productsData) {
      const hasProducts = productsData.data && productsData.data.length > 0;
@@ -30,7 +29,6 @@ export default function CollectionSection({ collection, locale }: Props) {
    }
  }, [isLoading, productsData]);

-  // Don't render if no products after loading
  if (!isLoading && (!productsData?.data || productsData.data.length === 0)) {
    return null;
  }
@@ -39,7 +37,6 @@ export default function CollectionSection({ collection, locale }: Props) {
    router.push(`/${locale}/collections/${collection.id}`);
  };

-  // Show skeleton while loading
  if (isLoading) {
    return (
      <section className="bg-white rounded-2xl shadow-sm p-6">
@@ -56,16 +53,14 @@ export default function CollectionSection({ collection, locale }: Props) {
    );
  }

-  // Show error state
  if (isError) {
-    return null; // Silently skip errored collections
+    return null;
  }

-  // Slice to show only first 4 products
-  const displayProducts = productsData?.data.slice(0, 4) || [];
+  const displayProducts = productsData?.data.slice(0, 10) || [];

  return (
-    <section className="bg-white rounded-2xl shadow-sm p-6">
+    <section className="bg-white rounded-2xl shadow-sm ">
      <div
        className="flex items-center justify-between mb-4 cursor-pointer group"
        onClick={handleTitleClick}
@@ -78,14 +73,15 @@ export default function CollectionSection({ collection, locale }: Props) {

      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
        {displayProducts.map((product) => {
-          // Extract first media image or use placeholder
-          const firstImage =
-            product.media?.[0]?.images_800x800 ||
-            product.media?.[0]?.images_720x720 ||
-            product.media?.[0]?.thumbnail ||
-            "/placeholder-product.jpg";
+          // 🔥 TÜM RESİMLERİ AL - Burada değişiklik!
+          const allImages = product.media?.map(
+            (media) =>
+              media.images_800x800 ||
+              media.images_720x720 ||
+              media.images_400x400 ||
+              media.thumbnail
+          ).filter(Boolean) || ["/placeholder-product.jpg"];

-          // Format price
          const formattedPrice = product.price_amount
            ? `${parseFloat(product.price_amount).toFixed(2)} TMT`
            : "Price not available";
@@ -99,7 +95,7 @@ export default function CollectionSection({ collection, locale }: Props) {
                product.price_amount ? parseFloat(product.price_amount) : null
              }
              struct_price_text={formattedPrice}
-              images={[firstImage]}
+              images={allImages} // 🔥 Array olarak tüm resimler
              is_favorite={false}
              labels={[]}
              price_color="#111"
@@ -112,4 +108,4 @@ export default function CollectionSection({ collection, locale }: Props) {
      </div>
    </section>
  );
-}
+}