import { useState } from 'react'
import { Link } from '@inertiajs/react'
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import { AcademicCapIcon } from '@heroicons/react/24/outline'
export default function Layout({ children, user, title }) {
const [isMenuOpen, setIsMenuOpen] = useState(false)
return (
<div className="min-h-screen bg-gray-50 flex flex-col">
<header className="bg-white shadow-sm sticky top-0 z-10">
<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">
<Link href="/" className="text-xl font-bold text-indigo-600">
<AcademicCapIcon className="h-6 w-6" />
</Link>
</div>
<nav className="hidden sm:ml-6 sm:flex sm:space-x-8">
<Link
href="/"
className="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"
>
主页
</Link>
{user && (
<Link
href="/images/new"
className="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"
>
上传
</Link>
)}
{user && (
<Link
href="/tags"
className="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"
>
标签
</Link>
)}
{user?.roles.includes('admin') && (
<Link
href="/admin/images"
className="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"
>
图片总管
</Link>
)}
{user?.roles.includes('admin') && (
<Link
href="/admin/tags"
className="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"
>
标签总管
</Link>
)}
</nav>
</div>
<div className="hidden sm:ml-6 sm:flex sm:items-center">
{user ? (
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild>
<button className="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span className="sr-only">Open user menu</span>
<div className="h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-800 font-semibold">
{user.name?.charAt(0).toUpperCase()}
</div>
</button>
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content
className="min-w-[220px] bg-white rounded-md p-1 shadow-lg z-50"
sideOffset={5}
>
<DropdownMenu.Item className="text-sm text-gray-700 px-4 py-2 rounded hover:bg-gray-100">
{user.name}
</DropdownMenu.Item>
<DropdownMenu.Item className="text-sm text-gray-700 px-4 py-2 rounded hover:bg-gray-100">
<Link href="/images" className="block w-full text-left">
我的图片
</Link>
</DropdownMenu.Item>
<DropdownMenu.Separator className="h-px bg-gray-200 my-1" />
<DropdownMenu.Item className="text-sm text-gray-700 px-4 py-2 rounded hover:bg-gray-100">
<Link
href="/session"
method="delete"
as="button"
className="block w-full text-left"
>
登出
</Link>
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu.Root>
) : (
<div className="flex space-x-4">
<Link
href="/session/new"
className="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium"
>
登录
</Link>
<Link
href="/users/new"
className="bg-indigo-600 text-white hover:bg-indigo-700 px-3 py-2 rounded-md text-sm font-medium"
>
注册
</Link>
</div>
)}
</div>
<div className="-mr-2 flex items-center sm:hidden">
<button
onClick={() => setIsMenuOpen(!isMenuOpen)}
className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
>
<span className="sr-only">打开菜单</span>
<svg
className={`${isMenuOpen ? 'hidden' : 'block'} h-6 w-6`}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
<svg
className={`${isMenuOpen ? 'block' : 'hidden'} h-6 w-6`}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
</div>
</div>
{/* Mobile menu */}
<div className={`${isMenuOpen ? 'block' : 'hidden'} sm:hidden`}>
<div className="pt-2 pb-3 space-y-1">
<Link
href="/"
className="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
>
主页
</Link>
{user && (
<Link
href="/images/new"
className="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
>
上传
</Link>
)}
{user && (
<Link
href="/tags"
className="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
>
标签
</Link>
)}
{user?.roles?.includes('admin') && (
<Link
href="/admin/images"
className="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
>
图片总管
</Link>
)}
{user?.roles?.includes('admin') && (
<Link
href="/admin/tags"
className="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
>
标签总管
</Link>
)}
</div>
{user ? (
<div className="pt-4 pb-3 border-t border-gray-200">
<div className="flex items-center px-4">
<div className="flex-shrink-0">
<div className="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-800 font-semibold">
{user.name?.charAt(0).toUpperCase()}
</div>
</div>
<div className="ml-3">
<div className="text-base font-medium text-gray-800">
{user.name}
</div>
<div className="text-sm font-medium text-gray-500">
{user.email_address}
</div>
</div>
</div>
<div className="mt-3 space-y-1">
<Link
href="/images"
className="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100"
>
我的图片
</Link>
<Link
href="/session"
method="delete"
as="button"
className="block w-full text-left px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100"
>
登出
</Link>
</div>
</div>
) : (
<div className="pt-4 pb-3 border-t border-gray-200">
<div className="flex items-center justify-around">
<Link
href="/session/new"
className="text-gray-500 hover:text-gray-700 px-3 py-2 text-base font-medium"
>
登录
</Link>
<Link
href="/users/new"
className="bg-indigo-600 text-white hover:bg-indigo-700 px-3 py-2 rounded-md text-base font-medium"
>
注册
</Link>
</div>
</div>
)}
</div>
</header>
<main className='flex-grow'>
<div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">{children}</div>
</main>
<footer className="bg-white border-t border-gray-200 py-8">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<p className="text-center text-gray-500 text-sm">
© {new Date().getFullYear()}
</p>
</div>
</footer>
</div>
)
}