54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { faList, faEye, faCog } from '@fortawesome/free-solid-svg-icons';
|
|
|
|
interface LayoutProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export default function Layout({ children }: LayoutProps) {
|
|
const pathname = usePathname();
|
|
|
|
const navigation = [
|
|
{ name: 'Work Items', href: '/todo', icon: faList },
|
|
{ name: 'Admin Panel', href: '/manage', icon: faCog },
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
<nav className="bg-white shadow-sm border-b">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between h-16">
|
|
<div className="flex">
|
|
<div className="flex-shrink-0 flex items-center">
|
|
<h1 className="text-xl font-bold text-gray-900">Work Item Manager</h1>
|
|
</div>
|
|
<div className="hidden sm:ml-6 sm:flex sm:space-x-8">
|
|
{navigation.map((item) => (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className={`${
|
|
pathname.startsWith(item.href.split('/')[1] === 'detail' ? '/detail' : item.href)
|
|
? 'border-blue-500 text-gray-900'
|
|
: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
|
|
} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200`}
|
|
>
|
|
<FontAwesomeIcon icon={item.icon} className="mr-2 h-4 w-4" />
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
);
|
|
} |