chore: transfer repo

components/build-box/client/ClientSidebarWrapperWithTranslation.tsx

@@ -0,0 +1,56 @@
+'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} />;
+}