Sms Rehber eklemesi,Mobil uyumluluk ayarları,iletişim sayfası düzenlemeler vb.

2026-01-30 00:09:16 +03:00
parent 5fdb7592e7
commit d320787df6
20 changed files with 800 additions and 101 deletions
--- a/components/product/product-gallery.tsx
+++ b/components/product/product-gallery.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { useState } from "react"
+import Image from "next/image"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+interface ProductGalleryProps {
+    images: string[]
+    productName: string
+}
+
+export function ProductGallery({ images, productName }: ProductGalleryProps) {
+    const [selectedIndex, setSelectedIndex] = useState(0)
+
+    if (!images || images.length === 0) {
+        return (
+            <div className="relative aspect-square overflow-hidden rounded-xl border bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400">
+                Görsel Yok
+            </div>
+        )
+    }
+
+    const nextImage = () => {
+        setSelectedIndex((prev) => (prev + 1) % images.length)
+    }
+
+    const prevImage = () => {
+        setSelectedIndex((prev) => (prev - 1 + images.length) % images.length)
+    }
+
+    return (
+        <div className="space-y-4">
+            {/* Main Image */}
+            <div className="group relative aspect-square overflow-hidden rounded-xl border bg-slate-100 dark:bg-slate-800">
+                <Image
+                    src={images[selectedIndex]}
+                    alt={`${productName} - Görsel ${selectedIndex + 1}`}
+                    fill
+                    className="object-cover transition-all duration-300"
+                    priority
+                />
+
+                {/* Navigation Buttons (Only if multiple images) */}
+                {images.length > 1 && (
+                    <>
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            className="absolute left-2 top-1/2 -translate-y-1/2 h-8 w-8 rounded-full bg-white/80 hover:bg-white text-slate-800 opacity-0 group-hover:opacity-100 transition-opacity"
+                            onClick={prevImage}
+                        >
+                            <ChevronLeft className="h-4 w-4" />
+                        </Button>
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            className="absolute right-2 top-1/2 -translate-y-1/2 h-8 w-8 rounded-full bg-white/80 hover:bg-white text-slate-800 opacity-0 group-hover:opacity-100 transition-opacity"
+                            onClick={nextImage}
+                        >
+                            <ChevronRight className="h-4 w-4" />
+                        </Button>
+                    </>
+                )}
+            </div>
+
+            {/* Thumbnails */}
+            {images.length > 1 && (
+                <div className="grid grid-cols-4 gap-4">
+                    {images.map((img, idx) => (
+                        <button
+                            key={idx}
+                            onClick={() => setSelectedIndex(idx)}
+                            className={cn(
+                                "relative aspect-square overflow-hidden rounded-lg border bg-slate-100 dark:bg-slate-800 transition-all ring-offset-2",
+                                selectedIndex === idx
+                                    ? "ring-2 ring-primary"
+                                    : "opacity-70 hover:opacity-100"
+                            )}
+                        >
+                            <Image
+                                src={img}
+                                alt={`${productName} thumbnail ${idx + 1}`}
+                                fill
+                                className="object-cover"
+                            />
+                        </button>
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}