111 lines
4.0 KiB
TypeScript
111 lines
4.0 KiB
TypeScript
import { Metadata } from 'next';
|
|
import { Container } from '@/components/ui/Container';
|
|
import { Layout } from '@/components/layout/Layout';
|
|
import { Card, CardHeader, CardBody } from '@/components/ui/Card';
|
|
import { Button } from '@/components/ui/Button';
|
|
import Link from 'next/link';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Subpage Example | KLZ Cables',
|
|
description: 'Example subpage demonstrating breadcrumb functionality',
|
|
};
|
|
|
|
export default function Subpage({ params: { locale } }: { params: { locale: string } }) {
|
|
// Breadcrumb configuration
|
|
const breadcrumb = [
|
|
{ title: 'Example', path: `/${locale}/example` },
|
|
{ title: 'Subpage', path: `/${locale}/example/subpage` }
|
|
];
|
|
|
|
return (
|
|
<Layout
|
|
locale={locale}
|
|
siteName="KLZ Cables"
|
|
breadcrumb={breadcrumb}
|
|
>
|
|
<Container maxWidth="6xl" padding="md">
|
|
<div className="space-y-6">
|
|
{/* Page Header */}
|
|
<div className="text-center space-y-3">
|
|
<h1 className="text-4xl font-bold text-gray-900">Subpage with Breadcrumb</h1>
|
|
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
|
This page demonstrates the breadcrumb functionality in the Layout component.
|
|
Notice the breadcrumb navigation above this content area.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<Card variant="elevated">
|
|
<CardHeader>
|
|
<h2 className="text-2xl font-semibold">Breadcrumb Features</h2>
|
|
</CardHeader>
|
|
<CardBody>
|
|
<ul className="space-y-3 text-gray-700">
|
|
<li className="flex items-start gap-2">
|
|
<span className="text-primary font-bold">✓</span>
|
|
<span>Automatic breadcrumb generation based on current URL</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<span className="text-primary font-bold">✓</span>
|
|
<span>Clickable links for all parent pages</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<span className="text-primary font-bold">✓</span>
|
|
<span>Current page shown as non-clickable text</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<span className="text-primary font-bold">✓</span>
|
|
<span>Responsive design that works on all screen sizes</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<span className="text-primary font-bold">✓</span>
|
|
<span>Optional feature - only shown when breadcrumb prop is provided</span>
|
|
</li>
|
|
</ul>
|
|
</CardBody>
|
|
</Card>
|
|
|
|
{/* Navigation */}
|
|
<div className="flex justify-center gap-4">
|
|
<Link href={`/${locale}/example`}>
|
|
<Button variant="outline">← Back to Example</Button>
|
|
</Link>
|
|
<Link href={`/${locale}`}>
|
|
<Button variant="primary">Home</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Code Example */}
|
|
<Card>
|
|
<CardHeader>
|
|
<h3 className="text-xl font-semibold">How to Use Breadcrumbs</h3>
|
|
</CardHeader>
|
|
<CardBody>
|
|
<pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm">
|
|
<code>{`// In your page component:
|
|
import { Layout } from '@/components/layout/Layout';
|
|
|
|
export default function MyPage({ params: { locale } }) {
|
|
const breadcrumb = [
|
|
{ title: 'Home', path: \`/\${locale}\` },
|
|
{ title: 'Products', path: \`/\${locale}/products\` },
|
|
{ title: 'Details', path: \`/\${locale}/products/123\` }
|
|
];
|
|
|
|
return (
|
|
<Layout
|
|
locale={locale}
|
|
breadcrumb={breadcrumb}
|
|
>
|
|
{/* Your content */}
|
|
</Layout>
|
|
);
|
|
}`}</code>
|
|
</pre>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
</Container>
|
|
</Layout>
|
|
);
|
|
} |