77 lines
2.5 KiB
TypeScript
77 lines
2.5 KiB
TypeScript
'use client';
|
|
import { ConnectButton } from '@rainbow-me/rainbowkit';
|
|
import { useTheme } from 'next-themes';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Button } from '@/components/ui/button';
|
|
import { LanguageSelector } from '@/components/language-selector';
|
|
import { Moon, Sun } from 'lucide-react';
|
|
import { useEffect, useState } from 'react';
|
|
import Link from 'next/link';
|
|
|
|
export function Header() {
|
|
const { theme, setTheme } = useTheme();
|
|
const { t } = useTranslation();
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
const toggleTheme = () => {
|
|
console.log('Toggle clicked, current theme:', theme);
|
|
const newTheme = theme === 'dark' ? 'light' : 'dark';
|
|
console.log('Setting theme to:', newTheme);
|
|
setTheme(newTheme);
|
|
};
|
|
|
|
const logoSrc = !mounted ? '/logo-dark.svg' : theme === 'dark' ? '/logo-dark.svg' : '/logo-light.svg';
|
|
|
|
return (
|
|
<header className="border-b">
|
|
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<Link href="/">
|
|
<img
|
|
src={logoSrc}
|
|
alt="Liquidity Party"
|
|
className="h-8 w-auto cursor-pointer"
|
|
/>
|
|
</Link>
|
|
<span className="bg-yellow-500/20 text-yellow-500 text-xs font-bold px-2 py-1 rounded border border-yellow-500/50">
|
|
BETA TEST
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
{/* Navigation Links */}
|
|
<nav className="hidden md:flex items-center gap-1 mr-2">
|
|
<Link href="/">
|
|
<Button variant="ghost" size="sm" className="text-sm font-medium">
|
|
Swap
|
|
</Button>
|
|
</Link>
|
|
<Link href="/about">
|
|
<Button variant="ghost" size="sm" className="text-sm font-medium">
|
|
About
|
|
</Button>
|
|
</Link>
|
|
</nav>
|
|
|
|
{/* Language Selector */}
|
|
<LanguageSelector />
|
|
|
|
{/* Theme Toggle */}
|
|
<Button variant="ghost" size="icon" onClick={toggleTheme} type="button">
|
|
<Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
|
<Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
|
<span className="sr-only">Toggle theme</span>
|
|
</Button>
|
|
|
|
{/* Wallet Connect */}
|
|
<ConnectButton />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|