119 lines
4.4 KiB
TypeScript
119 lines
4.4 KiB
TypeScript
'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>
|
|
);
|
|
}
|