47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
'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>
|
|
);
|
|
}
|