chore: transfer repo

components/build-box/BuildBoxCustomizeClient.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import { Button } from "@/components/ui/Button";
+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";
+
+// Box option interface
+export interface BoxOption {
+  id: string;
+  title: string;
+  price: number;
+  image: string;
+}
+
+interface BoxCustomizeProps {
+  boxes: BoxOption[];
+}
+
+export function BuildBoxCustomizeClient({ boxes }: BoxCustomizeProps) {
+  const [selectedBoxId, setSelectedBoxId] = useState<string | null>(null);
+  const dispatch = useAppDispatch();
+  const items = useAppSelector(selectBoxItems);
+  
+  // Check if there's already a box in the items and set it as selected on load
+  useEffect(() => {
+    const existingBox = items.find(item => item.variantId === 'box-container');
+    if (existingBox) {
+      setSelectedBoxId(existingBox.id);
+    }
+  }, [items]);
+  
+  // When a box is selected, replace any existing box with the new one
+  const handleSelectBox = (box: BoxOption) => {
+    // If the same box is already selected, do nothing
+    if (selectedBoxId === box.id) return;
+    
+    // Set this box as selected
+    setSelectedBoxId(box.id);
+    
+    // Remove any existing box containers first
+    const existingBoxes = items.filter(item => item.variantId === 'box-container');
+    existingBoxes.forEach(existingBox => {
+      dispatch(removeFromBox({ id: existingBox.id, color: existingBox.color }));
+    });
+    
+    // Add the new box
+    dispatch(addToBox({
+      id: box.id,
+      name: box.title,
+      price: box.price,
+      image: box.image,
+      quantity: 1,
+      variantId: 'box-container', // Mark this as a box container, not a product
+    }));
+  };
+  
+  return (
+    <div>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        {boxes.map((box) => (
+          <BoxOption 
+            key={box.id} 
+            box={box} 
+            isSelected={selectedBoxId === box.id}
+            onSelect={() => handleSelectBox(box)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// Box option component
+function BoxOption({ 
+  box, 
+  isSelected, 
+  onSelect 
+}: { 
+  box: BoxOption; 
+  isSelected: boolean;
+  onSelect: () => void;
+}) {
+  return (
+    <div className={`border rounded-md overflow-hidden ${isSelected ? 'ring-2 ring-primary' : ''}`}>
+      <div className="relative h-60 overflow-hidden">
+        <Image
+          src={box.image}
+          alt={box.title}
+          fill
+          className="object-cover transition-transform duration-300"
+        />
+        {/* Overlay with "Dodaj u box" button - always visible for selected, only on hover for others */}
+        <div className={`absolute inset-0 flex items-center justify-center ${isSelected ? 'bg-black/40' : 'bg-black/40 opacity-0 hover:opacity-100 transition-opacity duration-300'}`}>
+          <Button 
+            variant="custom"
+            onClick={onSelect}
+          >
+            Dodaj u box
+          </Button>
+        </div>
+        {isSelected && (
+          <div className="absolute top-2 right-2 bg-primary text-white 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>
+        )}
+      </div>
+      <div className="p-4">
+        <div className="flex justify-between items-start">
+          <h3 className="font-medium">{box.title}</h3>
+          <span className="font-medium">${box.price.toFixed(2)}</span>
+        </div>
+      </div>
+    </div>
+  );
+}