'use client'
import { ReactNode } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import {
HomeIcon,
PlayIcon,
CogIcon,
ChartBarIcon,
BellIcon,
UserIcon
} from '@heroicons/react/24/outline'
import { clsx } from 'clsx'
interface DashboardLayoutProps {
children: ReactNode
}
const navigation = [
{ name: 'Dashboard', href: '/', icon: HomeIcon },
{ name: 'Workflows', href: '/workflows', icon: PlayIcon },
{ name: 'Analytics', href: '/analytics', icon: ChartBarIcon },
{ name: 'Settings', href: '/settings', icon: CogIcon },
]
export default function DashboardLayout({ children }: DashboardLayoutProps) {
const pathname = usePathname()
return (
<div className="min-h-screen bg-gray-50">
{/* Sidebar */}
<div className="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
<div className="flex-1 flex flex-col min-h-0 bg-white border-r border-gray-200">
<div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
<div className="flex items-center flex-shrink-0 px-4">
<h1 className="text-xl font-bold text-gray-900">
CodePilot MCP
</h1>
</div>
<nav className="mt-5 flex-1 px-2 space-y-1">
{navigation.map((item) => {
const isActive = pathname === item.href
return (
<Link
key={item.name}
href={item.href}
className={clsx(
isActive
? 'bg-primary-50 border-primary-500 text-primary-700'
: 'border-transparent text-gray-600 hover:bg-gray-50 hover:text-gray-900',
'group flex items-center px-2 py-2 text-sm font-medium border-l-4 rounded-md'
)}
>
<item.icon
className={clsx(
isActive
? 'text-primary-500'
: 'text-gray-400 group-hover:text-gray-500',
'mr-3 h-5 w-5'
)}
aria-hidden="true"
/>
{item.name}
</Link>
)
})}
</nav>
</div>
</div>
</div>
{/* Main content */}
<div className="md:pl-64 flex flex-col flex-1">
{/* Top bar */}
<div className="sticky top-0 z-10 md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3 bg-gray-50">
<button
type="button"
className="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500"
>
<span className="sr-only">Open sidebar</span>
{/* Mobile menu icon */}
</button>
</div>
<div className="sticky top-0 z-10 flex-shrink-0 flex h-16 bg-white shadow">
<div className="flex-1 px-4 flex justify-between">
<div className="flex-1 flex">
{/* Search bar could go here */}
</div>
<div className="ml-4 flex items-center md:ml-6">
{/* Notifications */}
<button
type="button"
className="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
>
<span className="sr-only">View notifications</span>
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button>
{/* Profile dropdown */}
<div className="ml-3 relative">
<div>
<button
type="button"
className="max-w-xs bg-white flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
id="user-menu-button"
>
<span className="sr-only">Open user menu</span>
<div className="h-8 w-8 rounded-full bg-primary-500 flex items-center justify-center">
<UserIcon className="h-5 w-5 text-white" />
</div>
</button>
</div>
</div>
</div>
</div>
</div>
<main className="flex-1">
<div className="py-6">
<div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
{children}
</div>
</div>
</main>
</div>
</div>
)
}
