Files
shorturl-analytics/app/(app)/AppLayoutClient.tsx
2025-04-01 19:43:30 +08:00

80 lines
2.7 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">
<nav className="bg-white border-b border-gray-200">
<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">
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 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
>
Dashboard
</Link>
<Link
href="/analytics"
className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
>
Analytics
</Link>
<Link
href="/events"
className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
>
Events
</Link>
<Link
href="/analytics/geo"
className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
>
Geographic
</Link>
<Link
href="/analytics/devices"
className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
>
Devices
</Link>
</div>
</div>
</div>
<div className="flex items-center">
<span className="text-sm text-gray-500 mr-4">{user?.email}</span>
<button
onClick={handleSignOut}
className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
>
Sign Out
</button>
</div>
</div>
</div>
</nav>
<main className="container mx-auto px-4 py-8">
{children}
</main>
</div>
</ProtectedRoute>
);
}