78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
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>
|
|
);
|
|
} |