| 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> |
| ); |
| } |
|
|
