k
78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { useTranslations } from 'next-intl'
|
|
import { useAccount } from 'wagmi'
|
|
import { useConnectModal } from '@rainbow-me/rainbowkit'
|
|
import { shortenAddress } from '@/lib/utils'
|
|
|
|
const navItems = [
|
|
{ key: 'overview', href: '' },
|
|
{ key: 'posts', href: '/posts' },
|
|
{ key: 'trades', href: '/trades' },
|
|
{ key: 'analytics', href: '/analytics' },
|
|
] as const
|
|
|
|
interface NavbarProps {
|
|
locale: string
|
|
}
|
|
|
|
export default function Navbar({ locale }: NavbarProps) {
|
|
const t = useTranslations('nav')
|
|
const pathname = usePathname()
|
|
const { address, isConnected } = useAccount()
|
|
const { openConnectModal } = useConnectModal()
|
|
|
|
function isActive(href: string) {
|
|
const full = `/${locale}${href}`
|
|
if (href === '') return pathname === `/${locale}` || pathname === `/${locale}/`
|
|
return pathname.startsWith(full)
|
|
}
|
|
|
|
return (
|
|
<nav className="fixed top-0 left-0 right-0 z-50 h-14 bg-[#000000] border-b border-[#141414] flex items-center px-6">
|
|
{/* Logo */}
|
|
<Link href={`/${locale}`} className="flex items-center gap-2 mr-10 shrink-0">
|
|
<span className="text-[#f97316] font-bold text-lg leading-none">TS</span>
|
|
<span className="text-white font-medium text-sm">TrumpSignal</span>
|
|
</Link>
|
|
|
|
{/* Center nav */}
|
|
<div className="flex items-center gap-6 flex-1">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.key}
|
|
href={`/${locale}${item.href}`}
|
|
className={`text-[13px] transition-colors ${
|
|
isActive(item.href) ? 'text-[#f97316]' : 'text-[#555555] hover:text-white'
|
|
}`}
|
|
>
|
|
{t(item.key)}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* Right side */}
|
|
<div className="flex items-center gap-3 shrink-0">
|
|
<button className="text-[13px] text-[#555555] hover:text-white border border-[#141414] rounded-full px-3 py-1 transition-colors">
|
|
{t('language')} ▾
|
|
</button>
|
|
|
|
{isConnected && address ? (
|
|
<button className="text-[13px] bg-[#141414] text-white border border-[#1a1a1a] rounded-full px-3 py-1">
|
|
{shortenAddress(address)}
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={openConnectModal}
|
|
className="text-[13px] bg-[#f97316] text-black font-medium rounded-full px-4 py-1.5 hover:bg-[#fb923c] transition-colors"
|
|
>
|
|
{t('connectWallet')}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|