86 lines
3.3 KiB
TypeScript
86 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { ProtectedRoute, useAuth } from '@/lib/auth';
|
|
|
|
export default function AppLayoutClient({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
const { signOut, user } = useAuth();
|
|
|
|
const handleSignOut = async () => {
|
|
await signOut();
|
|
};
|
|
|
|
return (
|
|
<ProtectedRoute>
|
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
|
|
<nav className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
|
|
<div className="container mx-auto px-4">
|
|
<div className="flex items-center justify-between h-16">
|
|
<div className="flex items-center">
|
|
<Link href="/" className="text-xl font-bold text-gray-900 dark:text-gray-100">
|
|
ShortURL Analytics
|
|
</Link>
|
|
<div className="hidden md:block ml-10">
|
|
<div className="flex items-baseline space-x-4">
|
|
<Link
|
|
href="/dashboard"
|
|
className="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 rounded-md text-sm font-medium"
|
|
>
|
|
Dashboard
|
|
</Link>
|
|
<Link
|
|
href="/analytics"
|
|
className="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 rounded-md text-sm font-medium"
|
|
>
|
|
Analytics
|
|
</Link>
|
|
<Link
|
|
href="/events"
|
|
className="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 rounded-md text-sm font-medium"
|
|
>
|
|
Events
|
|
</Link>
|
|
<Link
|
|
href="/analytics/geo"
|
|
className="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 rounded-md text-sm font-medium"
|
|
>
|
|
Geographic
|
|
</Link>
|
|
<Link
|
|
href="/analytics/devices"
|
|
className="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 rounded-md text-sm font-medium"
|
|
>
|
|
Devices
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center">
|
|
{user && (
|
|
<div className="flex items-center space-x-4">
|
|
<span className="text-sm text-gray-700 dark:text-gray-300">
|
|
{user.email}
|
|
</span>
|
|
<button
|
|
onClick={handleSignOut}
|
|
className="text-sm text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md"
|
|
>
|
|
退出登录
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<main className="py-10">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
</ProtectedRoute>
|
|
);
|
|
}
|