56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { Heading } from "@/components/ui/Typography";
|
|
import { useTranslation } from "@/lib/hooks/useTranslation";
|
|
import { useEffect, useState } from "react";
|
|
import { BuildBoxSidebarWithTranslation } from "./BuildBoxSidebarWithTranslation";
|
|
|
|
interface ClientSidebarWrapperWithTranslationProps {
|
|
isMobile?: boolean;
|
|
}
|
|
|
|
export function ClientSidebarWrapperWithTranslation({ isMobile = false }: ClientSidebarWrapperWithTranslationProps) {
|
|
const { t } = useTranslation();
|
|
// 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">
|
|
{!isMobile && (
|
|
<div className="p-4 pt-8 pb-4 border-b">
|
|
<Heading level={3} className="text-center">{t('buildBox.sidebar.title')}</Heading>
|
|
</div>
|
|
)}
|
|
<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">{t('buildBox.sidebar.boxPrice')}</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 <BuildBoxSidebarWithTranslation isMobile={isMobile} />;
|
|
}
|