migration wip

components/layout/Layout.tsx

@@ -0,0 +1,78 @@
+import { ReactNode } from 'react';
+import Link from 'next/link';
+import { Header } from './Header';
+import { Footer } from './Footer';
+import { Container } from '@/components/ui/Container';
+
+interface LayoutProps {
+  children: ReactNode;
+  locale: string;
+  siteName?: string;
+  logo?: string;
+  showSidebar?: boolean;
+  breadcrumb?: Array<{ title: string; path: string }>;
+}
+
+export function Layout({ 
+  children, 
+  locale, 
+  siteName = 'KLZ Cables', 
+  logo,
+  showSidebar = false,
+  breadcrumb
+}: LayoutProps) {
+  return (
+    <div className="min-h-screen flex flex-col">
+      {/* Header */}
+      <Header 
+        locale={locale} 
+        siteName={siteName} 
+        logo={logo} 
+      />
+
+      {/* Main Content Area */}
+      <main className="flex-1">
+        {/* Breadcrumb */}
+        {breadcrumb && breadcrumb.length > 0 && (
+          <div className="bg-gray-50 border-b border-gray-200">
+            <Container maxWidth="6xl" padding="md">
+              <nav className="flex items-center gap-2 text-sm text-gray-600 py-3" aria-label="Breadcrumb">
+                <Link 
+                  href={`/${locale}`} 
+                  className="hover:text-primary transition-colors"
+                >
+                  Home
+                </Link>
+                {breadcrumb.map((item, index) => (
+                  <div key={item.path} className="flex items-center gap-2">
+                    <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                    </svg>
+                    {index === breadcrumb.length - 1 ? (
+                      <span className="text-gray-900 font-medium">{item.title}</span>
+                    ) : (
+                      <Link 
+                        href={item.path} 
+                        className="hover:text-primary transition-colors"
+                      >
+                        {item.title}
+                      </Link>
+                    )}
+                  </div>
+                ))}
+              </nav>
+            </Container>
+          </div>
+        )}
+
+        {/* Content */}
+        <Container maxWidth="6xl" padding="md" className="py-8 md:py-12">
+          {children}
+        </Container>
+      </main>
+
+      {/* Footer */}
+      <Footer locale={locale} siteName={siteName} />
+    </div>
+  );
+}