feat: complete website implementation

2026-06-21 21:53:15 +02:00
parent b147112bdc
commit dfd3888517
110 changed files with 18276 additions and 217 deletions
@@ -0,0 +1,55 @@
+"use client";
+
+import React, { useState } from 'react';
+import Image from 'next/image';
+
+interface ProductGalleryProps {
+  image: string;
+  name: string;
+  images?: string[]; // opcjonalna dodatkowa galeria z contentu, u nas na razie w mocku mamy 1 image
+}
+
+export function ProductGallery({ image, name, images }: ProductGalleryProps) {
+  const [mainImage, setMainImage] = useState(image || 'https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=800&q=80');
+
+  // Tworzymy tablicę miniatur, używamy placeholdera jako drugiej by pokazać funkcjonalność
+  const gallery = images && images.length > 0 
+    ? images 
+    : [image, 'https://images.unsplash.com/photo-1584622650111-993a426fbf0a?w=800&q=80']; 
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Główne zdjęcie */}
+      <div className="relative aspect-square w-full bg-slate-50 rounded-2xl border border-border overflow-hidden flex items-center justify-center p-8">
+        <Image
+          src={mainImage}
+          alt={name}
+          width={800}
+          height={800}
+          className="object-contain w-full h-full"
+          priority
+        />
+      </div>
+
+      {/* Miniatury */}
+      {gallery.length > 1 && (
+        <div className="flex gap-4 overflow-x-auto pb-2">
+          {gallery.map((img, idx) => (
+            <button
+              key={idx}
+              onClick={() => setMainImage(img)}
+              className={`relative w-24 h-24 shrink-0 rounded-xl border-2 overflow-hidden bg-slate-50 p-2 transition-all ${mainImage === img ? 'border-primary' : 'border-border hover:border-primary/50'}`}
+            >
+              <Image
+                src={img}
+                alt={`${name} - miniatura ${idx + 1}`}
+                fill
+                className="object-contain"
+              />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}