chore: transfer repo

2026-01-19 20:21:14 +01:00
commit 7d2fb0c737
213 changed files with 18085 additions and 0 deletions
--- a/components/build-box/client/BuildBoxCustomizeClientWithTranslation.tsx
+++ b/components/build-box/client/BuildBoxCustomizeClientWithTranslation.tsx
@@ -0,0 +1,119 @@
+'use client';
+
+import { Button } from "@/components/ui/Button";
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import { useAppDispatch, useAppSelector } from "@/lib/redux/hooks";
+import { addToBox, removeFromBox, selectBoxItems } from "@/lib/redux/slices/boxSlice";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+
+export interface BoxOption {
+  id: string;
+  title: string;
+  price: number;
+  image: string;
+}
+
+interface BuildBoxCustomizeClientWithTranslationProps {
+  boxes: BoxOption[];
+}
+
+export function BuildBoxCustomizeClientWithTranslation({ boxes }: BuildBoxCustomizeClientWithTranslationProps) {
+  const { t, locale } = useTranslation();
+  const dispatch = useAppDispatch();
+  const [selectedBox, setSelectedBox] = useState<string | null>(null);
+  const boxItems = useAppSelector(selectBoxItems);
+  
+  // Učitaj odabranu kutiju iz postojećih item-a prilikom učitavanja stranice
+  useEffect(() => {
+    const existingBox = boxItems.find(item => item.variantId === 'box-container');
+    if (existingBox) {
+      setSelectedBox(existingBox.id);
+    }
+  }, [boxItems]);
+
+  const handleSelectBox = (box: BoxOption) => {
+    // Ako je ista kutija već odabrana, ne radi ništa
+    if (selectedBox === box.id) return;
+    
+    setSelectedBox(box.id);
+    
+    // Ukloni sve postojeće kutije iz košarice
+    const existingBoxes = boxItems.filter(item => item.variantId === 'box-container');
+    existingBoxes.forEach(existingBox => {
+      dispatch(removeFromBox({ id: existingBox.id, color: existingBox.color }));
+    });
+    
+    // Add box to the cart
+    dispatch(addToBox({
+      id: box.id,
+      name: box.title,
+      price: box.price,
+      image: box.image,
+      quantity: 1,
+      variantId: 'box-container', // Special ID to identify this as a box
+    }));
+  };
+  
+  return (
+    <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+      {boxes.map((box) => {
+        const isSelected = selectedBox === box.id;
+        return (
+          <div
+            key={box.id}
+            className={`flex flex-col group relative cursor-pointer ${isSelected ? 'ring-2 ring-primary rounded-lg' : ''}`}
+            onClick={() => handleSelectBox(box)}
+          >
+            <div className="relative aspect-[4/3] overflow-hidden rounded-lg">
+              <Image 
+                src={box.image} 
+                alt={box.title} 
+                fill
+                className="object-cover"
+              />
+              
+              {/* Oznaka za odabranu kutiju */}
+              {isSelected && (
+                <div className="absolute top-0 right-0 bg-primary text-white m-2 rounded-full p-1 w-6 h-6 flex items-center justify-center">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <polyline points="20 6 9 17 4 12"></polyline>
+                  </svg>
+                </div>
+              )}
+              
+              {/* Mobile button - always visible */}
+              <div className="absolute inset-0 flex items-center justify-center md:hidden">
+                <Button
+                  variant={isSelected ? "custom" : "primary"}
+                  className="w-auto shadow-md"
+                >
+                  {isSelected 
+                    ? (locale === 'en' ? 'Selected' : 'Odabrano') 
+                    : t('buildBox.customize.options.select')}
+                </Button>
+              </div>
+              
+              {/* Desktop button - visible on hover */}
+              <div className="absolute inset-0 hidden md:flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                <Button
+                  variant={isSelected ? "custom" : "primary"}
+                  className="w-auto shadow-md"
+                >
+                  {isSelected 
+                    ? (locale === 'en' ? 'Selected' : 'Odabrano') 
+                    : t('buildBox.customize.options.select')}
+                </Button>
+              </div>
+            </div>
+            
+            <div className="pt-4 flex flex-col">
+              <h3 className="text-lg font-bold">{box.title}</h3>
+              <p className="text-lg font-medium">${box.price.toFixed(2)}</p>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}