File size: 3,702 Bytes
7200823 f667d47 c6b6c96 7200823 de40b1a 7200823 f667d47 7200823 de40b1a c6b6c96 7200823 de40b1a 7200823 de40b1a 7200823 de40b1a 7200823 de40b1a 7200823 de40b1a c6b6c96 de40b1a 7200823 | 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 | 'use client'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { cn } from '@/lib/utils'
import { LayoutDashboard, Trophy, Megaphone, BarChart3, Wallet, Bot, Zap, Shield, ChevronLeft, ChevronRight, Settings } from 'lucide-react'
import { useState, useEffect } from 'react'
const nav = [
{ label: 'Dashboard', href: '/', icon: LayoutDashboard },
{ label: 'Leaderboard', href: '/leaderboard', icon: Trophy },
{ label: 'Campaigns', href: '/campaigns', icon: Megaphone },
{ label: 'Analytics', href: '/analytics', icon: BarChart3 },
{ label: 'Wallets', href: '/wallets', icon: Wallet },
{ label: 'AI Agent', href: '/agent', icon: Bot },
{ label: 'Settings', href: '/settings', icon: Settings },
]
export function Sidebar() {
const path = usePathname()
const [col, setCol] = useState(false)
const [eventCount, setEventCount] = useState<number | null>(null)
useEffect(() => {
const fetchCount = async () => {
try {
const res = await fetch('/api/torque/events/recent?limit=1')
if (res.ok) {
const data = await res.json()
setEventCount(data.total ?? 0)
}
} catch {}
}
fetchCount()
const i = setInterval(fetchCount, 5000)
return () => clearInterval(i)
}, [])
return (
<aside className={cn('hidden md:flex flex-col border-r border-hairline-dark bg-surface-card transition-all duration-300', col ? 'w-[68px]' : 'w-[240px]')}>
<div className="flex items-center h-16 px-4 border-b border-hairline-dark">
<div className="flex items-center gap-2.5 overflow-hidden">
<div className="w-8 h-8 rounded-lg bg-brand-yellow flex items-center justify-center flex-shrink-0"><Zap className="w-5 h-5 text-ink" /></div>
{!col && <span className="text-title-sm text-brand-yellow font-bold tracking-tight animate-slide-in-right">FlowState</span>}
</div>
</div>
<nav className="flex-1 py-4 px-2 space-y-1">
{nav.map(item => {
const active = path === item.href || (item.href !== '/' && path.startsWith(item.href))
return (
<Link key={item.href} href={item.href} className={cn('flex items-center gap-3 px-3 py-2.5 rounded-lg text-nav transition-all duration-200', active ? 'bg-brand-yellow/10 text-brand-yellow' : 'text-muted hover:text-[#eaecef] hover:bg-surface-elevated', col && 'justify-center px-2')}>
<item.icon className={cn('w-5 h-5 flex-shrink-0', active && 'text-brand-yellow')} />
{!col && <span>{item.label}</span>}
</Link>
)
})}
</nav>
<div className="p-2 border-t border-hairline-dark">
{!col && (
<div className="mx-3 mb-3 p-3 rounded-xl bg-brand-yellow/5 border border-brand-yellow/20">
<div className="flex items-center gap-2 mb-1"><Shield className="w-4 h-4 text-trading-up" /><span className="text-caption text-trading-up font-semibold">AI Agent Active</span></div>
<p className="text-caption text-muted">
{eventCount === null
? 'Connecting...'
: eventCount === 0
? 'No events this session'
: `${eventCount} event${eventCount === 1 ? '' : 's'} fired today`}
</p>
</div>
)}
<button onClick={() => setCol(!col)} className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-nav text-muted hover:text-[#eaecef] hover:bg-surface-elevated w-full transition-colors">
{col ? <ChevronRight className="w-5 h-5" /> : <ChevronLeft className="w-5 h-5" />}
{!col && <span>Collapse</span>}
</button>
</div>
</aside>
)
}
|