initial checkin

src/components/header.tsx

@@ -0,0 +1,56 @@
+'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';
+
+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-2">
+          <img
+            src={logoSrc}
+            alt="Liquidity Party"
+            className="h-8 w-auto"
+          />
+        </div>
+
+        <div className="flex items-center gap-2">
+          {/* 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>
+  );
+}