85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { useState } from 'react'
|
|
|
|
export function UserMenu() {
|
|
// TODO: Replace with actual auth state when authentication is implemented
|
|
const [isAuthenticated] = useState(false)
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
|
|
|
if (!isAuthenticated) {
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<Link
|
|
href="/login"
|
|
className="px-4 py-2 text-sm font-medium text-zinc-300 hover:text-white transition-colors"
|
|
>
|
|
Log in
|
|
</Link>
|
|
<Link
|
|
href="/register"
|
|
className="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-purple-600 to-pink-600 rounded-full hover:from-purple-700 hover:to-pink-700 transition-all"
|
|
>
|
|
Sign up
|
|
</Link>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
|
className="flex items-center gap-2 p-1 rounded-full hover:bg-zinc-800 transition-colors"
|
|
>
|
|
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center">
|
|
<span className="text-white text-sm font-medium">U</span>
|
|
</div>
|
|
</button>
|
|
|
|
{isMenuOpen && (
|
|
<>
|
|
<div
|
|
className="fixed inset-0 z-40"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
/>
|
|
<div className="absolute right-0 top-full mt-2 w-48 bg-zinc-900 rounded-lg shadow-xl border border-zinc-800 py-1 z-50">
|
|
<Link
|
|
href="/profile"
|
|
className="block px-4 py-2 text-sm text-zinc-300 hover:text-white hover:bg-zinc-800 transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
Profile
|
|
</Link>
|
|
<Link
|
|
href="/upload"
|
|
className="block px-4 py-2 text-sm text-zinc-300 hover:text-white hover:bg-zinc-800 transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
Upload Music
|
|
</Link>
|
|
<Link
|
|
href="/playlists"
|
|
className="block px-4 py-2 text-sm text-zinc-300 hover:text-white hover:bg-zinc-800 transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
My Playlists
|
|
</Link>
|
|
<hr className="my-1 border-zinc-800" />
|
|
<button
|
|
className="block w-full text-left px-4 py-2 text-sm text-zinc-300 hover:text-white hover:bg-zinc-800 transition-colors"
|
|
onClick={() => {
|
|
setIsMenuOpen(false)
|
|
// TODO: Implement logout
|
|
}}
|
|
>
|
|
Log out
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|