53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { Text } from "@/components/ui/Typography";
|
|
import { useAppSelector } from "@/lib/redux/hooks";
|
|
import { selectBoxTotal } from "@/lib/redux/slices/boxSlice";
|
|
import { container } from "@/lib/utils";
|
|
import { Product } from "lib/shopify/types";
|
|
import Link from "next/link";
|
|
import { ProductGrid } from "../products/ProductGrid";
|
|
import { BuildBoxSidebar } from "./BuildBoxSidebar";
|
|
|
|
interface BuildBoxClientPageProps {
|
|
products: Product[];
|
|
}
|
|
|
|
export function BuildBoxClientPage({ products }: BuildBoxClientPageProps) {
|
|
const boxTotal = useAppSelector(selectBoxTotal);
|
|
|
|
return (
|
|
<div className="relative">
|
|
{/* Main content */}
|
|
<div className={`${container} lg:pr-[240px]`}>
|
|
|
|
<ProductGrid products={products} title="" />
|
|
|
|
{/* Add bottom padding on mobile to make room for mobile sidebar */}
|
|
<div className="h-24 lg:hidden"></div>
|
|
</div>
|
|
|
|
{/* Desktop sidebar - right side, full height with scrolling */}
|
|
<div className="hidden lg:block fixed top-0 right-0 w-[230px] h-full bg-gray-100 border-l border-gray-200 shadow-sm">
|
|
<div className="pt-[88px] h-full overflow-y-auto">
|
|
<BuildBoxSidebar />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile sidebar - fixed at bottom of screen */}
|
|
<div className="lg:hidden fixed bottom-0 left-0 right-0 h-20 bg-white border-t border-gray-200 flex items-center justify-between px-4 z-50">
|
|
<div>
|
|
<Text weight="semibold">Cijena boxa: ${boxTotal.toFixed(2)}</Text>
|
|
</div>
|
|
<Link
|
|
href="/build-box/customize"
|
|
className="bg-primary text-white px-6 py-2 rounded disabled:bg-gray-400"
|
|
aria-disabled={boxTotal === 0}
|
|
tabIndex={boxTotal === 0 ? -1 : undefined}
|
|
>
|
|
Idući korak
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|