sk/Perplexica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added logout button if user is detected, todo: some styling

Browse source
This commit is contained in:
Genuinely 2025-03-27 14:59:56 -07:00
parent ab6040f083
commit 7add89b205
4 changed files with 53 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/layout.tsx
View file

@ -5,6 +5,7 @@ import { cn } from '@/lib/utils';
import Sidebar from '@/components/Sidebar'; import Sidebar from '@/components/Sidebar';
import { Toaster } from 'sonner'; import { Toaster } from 'sonner';
import ThemeProvider from '@/components/theme/Provider'; import ThemeProvider from '@/components/theme/Provider';
import Header from '@/components/Header';
const montserrat = Montserrat({ const montserrat = Montserrat({
weight: ['300', '400', '500', '700'], weight: ['300', '400', '500', '700'],
@ -28,6 +29,7 @@ export default function RootLayout({
<html className="h-full" lang="en" suppressHydrationWarning> <html className="h-full" lang="en" suppressHydrationWarning>
<body className={cn('h-full', montserrat.className)}> <body className={cn('h-full', montserrat.className)}>
<ThemeProvider> <ThemeProvider>
<Header />
<Sidebar>{children}</Sidebar> <Sidebar>{children}</Sidebar>
<Toaster <Toaster
toastOptions={{ toastOptions={{

50
src/components/Header.tsx Normal file
View file

@ -0,0 +1,50 @@
// components/Header.tsx
'use client'
import { useUser } from '@auth0/nextjs-auth0'
import Link from 'next/link'
import Image from 'next/image'
export default function Header() {
const { user, error, isLoading } = useUser()
if (isLoading) return <div className="p-4 bg-gray-100">Loading...</div>
if (error) return <div className="p-4 bg-red-100 text-red-600">{error.message}</div>
return (
<header className="flex justify-between items-center px-6 py-4 bg-white border-b shadow-sm">
<div className="text-xl font-bold">My App</div>
<nav className="flex items-center gap-4">
{user ? (
<>
{/* <div className="flex items-center gap-2">
{user.picture && (
<Image
src={user.picture}
alt={user.name || 'User'}
width={32}
height={32}
className="rounded-full"
/>
)}
<span>{user.name}</span>
</div> */}
<Link
href="auth/logout"
className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition"
>
Logout
</Link>
</>
) : (
<Link
href="auth/login"
className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
>
Login
</Link>
)}
</nav>
</header>
)
}

3
src/components/Navbar.tsx
View file

@ -64,8 +64,7 @@ const Navbar = ({
size={17} size={17}
className="active:scale-95 transition duration-100 cursor-pointer" className="active:scale-95 transition duration-100 cursor-pointer"
/> />
<DeleteChat redirect chatId={chatId} chats={[]} setChats={() => {}} /> <DeleteChat redirect chatId={chatId} chats={[]} setChats={() => {}} />}
<ProfileButton /> {/* 👈 Add this here */}
</div> </div>
</div> </div>
); );

32
src/components/ProfileButton.tsx
View file

@ -1,32 +0,0 @@
'use client';
import { useEffect, useState } from 'react';
interface UserProfile {
name?: string;
email?: string;
picture?: string;
}
export default function ProfileButton() {
const [user, setUser] = useState<UserProfile | null>(null);
useEffect(() => {
fetch('/auth/profile')
.then((res) => (res.ok ? res.json() : null))
.then((data) => setUser(data?.user))
.catch(() => setUser(null));
}, []);
if (!user) return null;
return (
<a href="/auth/logout" title="Log out" className="block p-2">
<img
src={user.picture}
alt="profile"
className="rounded-full w-8 h-8 border border-white/20"
/>
</a>
);
}