migration wip

2025-12-29 18:18:48 +01:00
parent 292975299d
commit f86785bfb0
182 changed files with 30131 additions and 9321 deletions
--- a/app/[locale]/example/subpage/page.tsx
+++ b/app/[locale]/example/subpage/page.tsx
@@ -0,0 +1,111 @@
+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>
+  );
+}