language text full complated

components/header.tsx

@@ -0,0 +1,104 @@
+"use client"
+
+import { useState } from "react"
+import { Menu, X, Globe, Phone } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { useLanguage } from "@/contexts/language-context"
+
+export default function Header() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const { language, setLanguage, t } = useLanguage()
+
+  const languages = [
+    { code: "en" as const, name: "English" },
+    { code: "uz" as const, name: "O'zbekcha" },
+    { code: "ru" as const, name: "Русский" },
+  ]
+
+  return (
+    <header className="sticky top-0 z-50 bg-background border-b border-border">
+      <div className="bg-slate-900 text-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2 flex items-center justify-between text-sm">
+          <div className="flex items-center gap-2">
+            <Phone size={16} />
+            <span>+998 (71) 200-01-02</span>
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button className="flex items-center gap-1 hover:text-primary transition-colors">
+                <Globe size={16} />
+                {language.toUpperCase()}
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="bg-slate-800 border-slate-700">
+              {languages.map((lang) => (
+                <DropdownMenuItem
+                  key={lang.code}
+                  onClick={() => setLanguage(lang.code)}
+                  className="cursor-pointer hover:bg-slate-700 text-white"
+                >
+                  {lang.name}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
+      <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+            <span className="text-white font-bold text-sm">D</span>
+          </div>
+          <span className="font-bold text-lg text-foreground">Dwatt</span>
+        </div>
+
+        <div className="hidden md:flex items-center gap-8">
+          <a href="#features" className="text-foreground hover:text-primary transition-colors">
+            {t.nav.features}
+          </a>
+          <a href="#pricing" className="text-foreground hover:text-primary transition-colors">
+            {t.nav.pricing}
+          </a>
+          <a href="#faq" className="text-foreground hover:text-primary transition-colors">
+            {t.nav.faq}
+          </a>
+        </div>
+
+        <div className="hidden md:flex items-center gap-4">
+          <Button variant="outline" className="border-border bg-transparent">
+            {t.nav.login}
+          </Button>
+          <Button className="bg-primary hover:bg-primary/90">{t.nav.signup}</Button>
+        </div>
+
+        <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="md:hidden">
+          {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
+        </button>
+      </nav>
+
+      {mobileMenuOpen && (
+        <div className="md:hidden border-t border-border bg-background">
+          <div className="px-4 py-4 space-y-4">
+            <a href="#features" className="block text-foreground hover:text-primary">
+              {t.nav.features}
+            </a>
+            <a href="#pricing" className="block text-foreground hover:text-primary">
+              {t.nav.pricing}
+            </a>
+            <a href="#faq" className="block text-foreground hover:text-primary">
+              {t.nav.faq}
+            </a>
+            <div className="flex gap-2 pt-4 border-t border-border">
+              <Button variant="outline" className="flex-1 bg-transparent">
+                {t.nav.login}
+              </Button>
+              <Button className="flex-1 bg-primary hover:bg-primary/90">{t.nav.signup}</Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </header>
+  )
+}