File size: 5,984 Bytes
78d0e31 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 |
"use client"
import { useState } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Flame, Menu, X, Wallet, Bell, User, Settings, LogOut } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { useIsMobile } from "@/hooks/use-mobile"
const AppHeader = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false)
const [isConnected, setIsConnected] = useState(false)
const pathname = usePathname()
const isMobile = useIsMobile()
const navigation = [
{ name: "Home", href: "/", current: pathname === "/" },
{ name: "Launch", href: "/launch", current: pathname === "/launch" },
{ name: "Analytics", href: "/analytics", current: pathname === "/analytics" },
{ name: "Community", href: "/community-pulse", current: pathname === "/community-pulse" },
{ name: "Healers", href: "/healers", current: pathname === "/healers" },
{ name: "Learn & Earn", href: "/learn-earn", current: pathname === "/learn-earn" },
]
const handleConnectWallet = () => {
// Simulate wallet connection
setIsConnected(!isConnected)
}
return (
<header className="bg-white/95 backdrop-blur-sm border-b border-orange-100 sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center py-4">
{/* Logo */}
<Link href="/" className="flex items-center space-x-2">
<Flame className="h-8 w-8 text-orange-500" />
<span className="text-xl font-bold text-gray-900">FlameBorn</span>
<Badge variant="outline" className="hidden sm:inline-flex text-xs">
Ubuntu
</Badge>
</Link>
{/* Desktop Navigation */}
{!isMobile && (
<nav className="hidden md:flex space-x-8">
{navigation.map((item) => (
<Link
key={item.name}
href={item.href}
className={`text-sm font-medium transition-colors ${
item.current
? "text-orange-600 border-b-2 border-orange-600 pb-1"
: "text-gray-700 hover:text-orange-600"
}`}
>
{item.name}
</Link>
))}
</nav>
)}
{/* Right side actions */}
<div className="flex items-center space-x-4">
{/* Notifications */}
<Button variant="ghost" size="sm" className="relative">
<Bell className="h-5 w-5" />
<Badge className="absolute -top-1 -right-1 h-5 w-5 rounded-full p-0 flex items-center justify-center text-xs bg-red-500">
3
</Badge>
</Button>
{/* Wallet Connection */}
<Button
onClick={handleConnectWallet}
variant={isConnected ? "outline" : "default"}
size="sm"
className={isConnected ? "border-green-500 text-green-700" : "bg-orange-500 hover:bg-orange-600"}
>
<Wallet className="h-4 w-4 mr-2" />
{isConnected ? "Connected" : "Connect"}
</Button>
{/* User Menu */}
{isConnected && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm" className="relative">
<User className="h-5 w-5" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56">
<DropdownMenuLabel>Ubuntu Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<Link href="/profile">
<User className="mr-2 h-4 w-4" />
Profile
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href="/dashboard">
<Settings className="mr-2 h-4 w-4" />
Dashboard
</Link>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={() => setIsConnected(false)}>
<LogOut className="mr-2 h-4 w-4" />
Disconnect
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)}
{/* Mobile menu button */}
{isMobile && (
<Button variant="ghost" size="sm" onClick={() => setIsMenuOpen(!isMenuOpen)} className="md:hidden">
{isMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
</Button>
)}
</div>
</div>
{/* Mobile Navigation */}
{isMobile && isMenuOpen && (
<div className="md:hidden border-t border-orange-100 py-4">
<nav className="space-y-2">
{navigation.map((item) => (
<Link
key={item.name}
href={item.href}
className={`block px-3 py-2 text-sm font-medium rounded-md transition-colors ${
item.current
? "bg-orange-100 text-orange-600"
: "text-gray-700 hover:bg-orange-50 hover:text-orange-600"
}`}
onClick={() => setIsMenuOpen(false)}
>
{item.name}
</Link>
))}
</nav>
</div>
)}
</div>
</header>
)
}
export default AppHeader
|