initial commit
This commit is contained in:
Kar k1
241
components/header.tsx
Normal file
241
components/header.tsx
Normal file
@@ -0,0 +1,241 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from '@/components/ui/Link'
|
||||
import {
|
||||
Menu,
|
||||
X,
|
||||
Server,
|
||||
Zap,
|
||||
Users,
|
||||
LogOut,
|
||||
Settings,
|
||||
MessageSquare,
|
||||
BookOpen,
|
||||
Search,
|
||||
Edit,
|
||||
Tag,
|
||||
} from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { ThemeToggle } from '@/components/theme-toggle'
|
||||
import { useAuth } from '@/contexts/AuthContext'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { Logo } from '@/components/Logo'
|
||||
|
||||
export function Header() {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
||||
const [isClient, setIsClient] = useState(false)
|
||||
const { user, logout, loading } = useAuth()
|
||||
|
||||
// Ensure we only render auth-dependent content after hydration
|
||||
useEffect(() => {
|
||||
setIsClient(true)
|
||||
}, [])
|
||||
|
||||
const navigation = [
|
||||
{ name: 'Home', href: '/', icon: Server },
|
||||
{ name: 'Services', href: '/services', icon: Zap },
|
||||
{ name: 'Topics', href: '/topics', icon: BookOpen },
|
||||
{ name: 'Tools', href: '/tools', icon: Users },
|
||||
{ name: 'About', href: '/about', icon: Users },
|
||||
{ name: 'Feedback', href: '/feedback', icon: MessageSquare },
|
||||
]
|
||||
|
||||
return (
|
||||
<header className="fixed top-0 left-0 right-0 z-50 bg-gradient-glass backdrop-blur-lg border-b border-border/50">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<Logo size={32} />
|
||||
<Link
|
||||
href="/"
|
||||
className="text-xl font-bold text-foreground font-heading tracking-tight"
|
||||
>
|
||||
SiliconPin
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center space-x-8">
|
||||
{navigation.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="text-muted-foreground hover:text-primary transition-colors duration-300 font-medium tracking-tight"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center space-x-4">
|
||||
{/* Theme Toggle */}
|
||||
<div className="hidden md:flex">
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
|
||||
{/* Auth Section */}
|
||||
{!isClient || loading ? (
|
||||
// Show loading state during SSR and initial load
|
||||
<div className="hidden md:flex items-center space-x-2">
|
||||
<div className="w-16 h-9 bg-muted animate-pulse rounded"></div>
|
||||
<div className="w-20 h-9 bg-muted animate-pulse rounded"></div>
|
||||
</div>
|
||||
) : user ? (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="flex items-center gap-2">
|
||||
{user.avatar ? (
|
||||
<Image
|
||||
src={user.avatar}
|
||||
alt={user.name}
|
||||
width={24}
|
||||
height={24}
|
||||
className="w-6 h-6 rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-6 h-6 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-xs">
|
||||
{user.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
{user.name}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href="/profile" className="flex items-center gap-2">
|
||||
<Settings className="h-4 w-4" />
|
||||
Profile
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href="/dashboard" className="flex items-center gap-2">
|
||||
<Users className="h-4 w-4" />
|
||||
Dashboard
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href="/topics/new" className="flex items-center gap-2">
|
||||
<Edit className="h-4 w-4" />
|
||||
Create Topic
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href="/topics" className="flex items-center gap-2">
|
||||
<Search className="h-4 w-4" />
|
||||
Search Topics
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={() => logout()} className="text-red-600">
|
||||
<LogOut className="h-4 w-4 mr-2" />
|
||||
Sign Out
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
) : (
|
||||
<div className="hidden md:flex items-center space-x-2">
|
||||
<Button variant="ghost" asChild>
|
||||
<Link href="/auth">Login</Link>
|
||||
</Button>
|
||||
<Button variant="hero" size="sm" asChild>
|
||||
<Link href="/auth">Get Started</Link>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="md:hidden"
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
>
|
||||
{isMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{isMenuOpen && (
|
||||
<div className="md:hidden py-4 border-t border-border/50">
|
||||
<nav className="flex flex-col space-y-4">
|
||||
{navigation.map((item) => {
|
||||
const Icon = item.icon
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="flex items-center space-x-3 text-muted-foreground hover:text-primary transition-colors duration-300 p-2 rounded-lg hover:bg-accent/50"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<Icon className="w-4 h-4" />
|
||||
<span>{item.name}</span>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
<div className="pt-4 border-t border-border/50 flex flex-col space-y-2">
|
||||
{!isClient || loading ? (
|
||||
// Show loading state during SSR and initial load
|
||||
<>
|
||||
<div className="w-full h-9 bg-muted animate-pulse rounded"></div>
|
||||
<div className="w-full h-9 bg-muted animate-pulse rounded"></div>
|
||||
</>
|
||||
) : user ? (
|
||||
<>
|
||||
<Button variant="ghost" className="justify-start" asChild>
|
||||
<Link href="/profile">Profile</Link>
|
||||
</Button>
|
||||
<Button variant="ghost" className="justify-start" asChild>
|
||||
<Link href="/dashboard">Dashboard</Link>
|
||||
</Button>
|
||||
<div className="border-t border-border/50 pt-2 mt-2">
|
||||
<Button variant="ghost" className="justify-start" asChild>
|
||||
<Link href="/topics/new" className="flex items-center gap-2">
|
||||
<Edit className="h-4 w-4" />
|
||||
Create Topic
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variant="ghost" className="justify-start" asChild>
|
||||
<Link href="/topics" className="flex items-center gap-2">
|
||||
<Search className="h-4 w-4" />
|
||||
Search Topics
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="justify-start text-red-600"
|
||||
onClick={() => logout()}
|
||||
>
|
||||
Sign Out
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Button variant="ghost" className="justify-start" asChild>
|
||||
<Link href="/auth">Login</Link>
|
||||
</Button>
|
||||
<Button variant="hero" size="sm" asChild>
|
||||
<Link href="/auth">Get Started</Link>
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user