File size: 2,806 Bytes
6d643ca | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | import { ReactNode } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { appConfig, isCurrentPath, navigationItems } from '@/config/navigation';
interface LayoutProps {
children: ReactNode;
}
export default function Layout({ children }: LayoutProps) {
const location = useLocation();
const navigation = navigationItems.map((item) => ({
...item,
current: isCurrentPath(location.pathname, item.href),
}));
return (
<div className="min-h-screen bg-gray-50">
{/* Header */}
<header className="border-b bg-white shadow-sm">
<div className="container mx-auto px-4">
<div className="flex h-16 items-center justify-between">
<div className="flex items-center gap-8">
<Link to="/" className="flex items-center gap-2">
<appConfig.icon className="h-6 w-6 text-gray-900" />
<span className="text-xl font-bold text-gray-900">
{appConfig.name}
</span>
</Link>
<nav className="hidden items-center gap-6 md:flex">
{navigation.map((item) => {
const Icon = item.icon;
return (
<Link
key={item.name}
to={item.href}
className={`flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors ${
item.current
? 'bg-gray-100 text-gray-900'
: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
}`}
>
<Icon className="h-4 w-4" />
{item.name}
</Link>
);
})}
</nav>
</div>
</div>
</div>
</header>
{/* Main Content */}
<main className="flex-1">{children}</main>
{/* Mobile Navigation */}
<nav className="fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white md:hidden">
<div className="grid grid-cols-2">
{navigation.map((item) => {
const Icon = item.icon;
return (
<Link
key={item.name}
to={item.href}
className={`flex flex-col items-center gap-1 px-4 py-3 text-xs font-medium transition-colors ${
item.current ? 'text-gray-900' : 'text-gray-600'
}`}
>
<Icon className="h-5 w-5" />
{item.name}
</Link>
);
})}
</div>
</nav>
{/* Bottom padding for mobile navigation */}
<div className="h-16 md:hidden" />
</div>
);
}
|