49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { Section } from "@/components/ui/Section";
|
|
import { Heading } from "@/components/ui/Typography";
|
|
import { useEffect, useState } from "react";
|
|
import { BuildBoxSidebar } from "./BuildBoxSidebar";
|
|
|
|
export function ClientSidebarWrapper() {
|
|
// Use state to prevent hydration errors
|
|
const [isClient, setIsClient] = useState(false);
|
|
|
|
// After component mounts, set isClient to true
|
|
useEffect(() => {
|
|
setIsClient(true);
|
|
}, []);
|
|
|
|
// On the server, or during hydration, return a placeholder with the same dimensions
|
|
if (!isClient) {
|
|
return (
|
|
<div className="h-full flex flex-col">
|
|
<Section spacing="xs" className="border-b">
|
|
<Heading level={3} className="text-center">Your box</Heading>
|
|
</Section>
|
|
<div className="flex-1 p-4">
|
|
{/* Placeholder content to match dimensions */}
|
|
<div className="text-center py-8 text-gray-500">
|
|
<p>Loading...</p>
|
|
</div>
|
|
</div>
|
|
<div className="border-t p-4">
|
|
<div className="flex justify-between mb-4">
|
|
<p className="font-medium">Cijena boxa</p>
|
|
<p className="font-medium">$0.00</p>
|
|
</div>
|
|
|
|
<button
|
|
className="w-full py-3 bg-gray-200 text-gray-500 rounded cursor-not-allowed"
|
|
disabled
|
|
>
|
|
Loading...
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// On the client, after hydration, render the actual sidebar
|
|
return <BuildBoxSidebar />;
|
|
}
|