113 lines
3.8 KiB
TypeScript
113 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import { Heading } from "@/components/ui/Typography";
|
|
import { useTranslation } from "@/lib/hooks/useTranslation";
|
|
import { useAppSelector } from "@/lib/redux/hooks";
|
|
import { selectBoxTotal } from "@/lib/redux/slices/boxSlice";
|
|
import { container } from "@/lib/utils";
|
|
import { ChevronDown, ChevronUp } from "lucide-react";
|
|
import { ReactNode, useEffect, useState } from "react";
|
|
import { ClientSidebarWrapperWithTranslation } from "./ClientSidebarWrapperWithTranslation";
|
|
|
|
interface BuildBoxLayoutProps {
|
|
children: ReactNode;
|
|
title: string;
|
|
step: number;
|
|
totalSteps?: number;
|
|
backButton?: ReactNode;
|
|
}
|
|
|
|
export function BuildBoxLayout({
|
|
children,
|
|
title,
|
|
step,
|
|
totalSteps = 2,
|
|
backButton
|
|
}: BuildBoxLayoutProps) {
|
|
const { t } = useTranslation();
|
|
const [mobileCartOpen, setMobileCartOpen] = useState(false);
|
|
const storeBoxTotal = useAppSelector(selectBoxTotal);
|
|
|
|
// Dodajemo state za boxTotal koji će se koristiti za prikaz
|
|
const [displayBoxTotal, setDisplayBoxTotal] = useState(0);
|
|
|
|
// Ažuriramo displayBoxTotal samo na klijentskoj strani
|
|
useEffect(() => {
|
|
setDisplayBoxTotal(storeBoxTotal);
|
|
}, [storeBoxTotal]);
|
|
|
|
// Toggle mobile cart sidebar
|
|
const toggleMobileCart = () => {
|
|
setMobileCartOpen(!mobileCartOpen);
|
|
};
|
|
|
|
return (
|
|
<div className="relative">
|
|
{/* Main content */}
|
|
<div className={container}>
|
|
{/* Custom header with step indicator */}
|
|
<div className="mt-8 mb-8">
|
|
{/* Za korak 2, gumb nazad je iznad naslova */}
|
|
{step === 2 && backButton && (
|
|
<div className="mb-4">
|
|
{backButton}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between">
|
|
{/* Za korak 1, gumb nazad je pored naslova (ako postoji) */}
|
|
{step === 1 && backButton && (
|
|
<div>{backButton}</div>
|
|
)}
|
|
|
|
<Heading level={step === 1 ? 2 : 1} className={step === 1 ? "mt-16" : ""}>
|
|
{title}:
|
|
<span className="text-primary">{t('buildBox.step')} {step}</span>
|
|
</Heading>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pr-0 lg:pr-[240px]">
|
|
{children}
|
|
</div>
|
|
|
|
{/* Mobile sticky footer with cart button */}
|
|
<div className="lg:hidden fixed bottom-0 left-0 right-0 bg-[#E8E8E8] p-4 z-20 shadow-sm">
|
|
<div
|
|
className="w-full py-3 flex items-center justify-between cursor-pointer"
|
|
onClick={toggleMobileCart}
|
|
>
|
|
<span className="font-medium">{t('buildBox.sidebar.title')}</span>
|
|
<ChevronUp size={20} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Add padding at the bottom on mobile to account for the sticky footer */}
|
|
<div className="h-20 lg:h-0"></div>
|
|
</div>
|
|
|
|
{/* Desktop sidebar - right side, fixed position */}
|
|
<div className="hidden lg:block fixed top-[63px] right-0 w-[230px] h-[calc(100vh-65px)] bg-gray-100 border-l border-gray-200 shadow-sm z-10">
|
|
<ClientSidebarWrapperWithTranslation />
|
|
</div>
|
|
|
|
{/* Mobile full-screen sidebar overlay */}
|
|
{mobileCartOpen && (
|
|
<div className="lg:hidden fixed inset-0 bg-white z-50 flex flex-col h-screen max-h-screen overflow-hidden">
|
|
<div className="flex items-center justify-between p-4">
|
|
<Heading level={3}>{t('buildBox.sidebar.title')}</Heading>
|
|
<div
|
|
className="cursor-pointer"
|
|
onClick={toggleMobileCart}
|
|
>
|
|
<ChevronDown size={24} />
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto">
|
|
<ClientSidebarWrapperWithTranslation isMobile={true} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|