chore: transfer repo

components/build-box/client/BuildBoxCustomizePageContent.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import Link from "next/link";
+import { BoxOption } from "../BuildBoxCustomizeClient";
+import { RedirectIfEmptyBox } from "../RedirectIfEmptyBox";
+import { BuildBoxCustomizeClientWithTranslation } from "./BuildBoxCustomizeClientWithTranslation";
+import { BuildBoxLayout } from "./BuildBoxLayout";
+
+interface BuildBoxCustomizePageContentProps {
+  boxes: BoxOption[];
+}
+
+export function BuildBoxCustomizePageContent({ boxes }: BuildBoxCustomizePageContentProps) {
+  const { t } = useTranslation();
+  
+  // Back button component
+  const BackButton = (
+    <Link href="/build-box" className="inline-flex items-center text-sm text-gray-600">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-1">
+        <polyline points="15 18 9 12 15 6" />
+      </svg>
+      {t('buildBox.customize.back')}
+    </Link>
+  );
+
+  // If no boxes, display a message
+  if (!boxes || boxes.length === 0) {
+    return (
+      <BuildBoxLayout title={t('buildBox.customize.title')} step={2} backButton={BackButton}>
+        <div className="text-center py-8">
+          <p>{t('buildBox.customize.emptyMessage')}</p>
+        </div>
+      </BuildBoxLayout>
+    );
+  }
+
+  return (
+    <BuildBoxLayout title={t('buildBox.customize.title')} step={2} backButton={BackButton}>
+      {/* Client component to check if box has items and redirect if empty */}
+      <RedirectIfEmptyBox />
+      
+      {/* Boxes Grid - Client Component */}
+      <BuildBoxCustomizeClientWithTranslation boxes={boxes} />
+    </BuildBoxLayout>
+  );
+}