From 8f52988b6caa408a6c2ea5449bc0c9280c5cef93 Mon Sep 17 00:00:00 2001
From: BunyodL <blutfulloyev@bk.ru>
Date: Sat, 26 Apr 2025 18:58:50 +0500
Subject: [PATCH] update: add language-switcher

---
 src/shared/language/ui/language-switcher.tsx | 44 ++++++++++++++++++++
 src/widgets/header/ui/desktop-nav.tsx        |  2 +-
 src/widgets/header/ui/index.tsx              | 12 ++++--
 src/widgets/header/ui/mobile-nav.tsx         |  2 +-
 4 files changed, 54 insertions(+), 6 deletions(-)
 create mode 100644 src/shared/language/ui/language-switcher.tsx

diff --git a/src/shared/language/ui/language-switcher.tsx b/src/shared/language/ui/language-switcher.tsx
new file mode 100644
index 0000000..0de4ed5
--- /dev/null
+++ b/src/shared/language/ui/language-switcher.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { Check, Globe } from 'lucide-react';
+import { useState } from 'react';
+
+import { type Language, languages, useLanguage } from '@/shared/language';
+import { Button } from '@/shared/shadcn-ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/shared/shadcn-ui/dropdown-menu';
+
+export function LanguageSwitcher() {
+  const { language, setLanguage } = useLanguage();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button variant='ghost' size='sm' className='h-8 w-8 px-0'>
+          <Globe className='h-4 w-4' />
+          <span className='sr-only'>Switch language</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align='end'>
+        {Object.entries(languages).map(([code, { name, flag }]) => (
+          <DropdownMenuItem
+            key={code}
+            onClick={() => {
+              setLanguage(code as Language);
+              setOpen(false);
+            }}
+          >
+            <span className='mr-2'>{flag}</span>
+            {name}
+            {code === language && <Check className='ml-2 h-4 w-4' />}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/widgets/header/ui/desktop-nav.tsx b/src/widgets/header/ui/desktop-nav.tsx
index d08b2fb..b58db02 100644
--- a/src/widgets/header/ui/desktop-nav.tsx
+++ b/src/widgets/header/ui/desktop-nav.tsx
@@ -14,7 +14,7 @@ import {
 
 export function DesktopNav() {
   return (
-    <NavigationMenu className='hidden md:flex'>
+    <NavigationMenu className='hidden lg:flex'>
       <NavigationMenuList>
         <NavigationMenuItem>
           <Link href='/' scroll>
diff --git a/src/widgets/header/ui/index.tsx b/src/widgets/header/ui/index.tsx
index 020facc..464f14d 100644
--- a/src/widgets/header/ui/index.tsx
+++ b/src/widgets/header/ui/index.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link';
 
 import { Logo } from '@/shared/assets/logo';
+import { LanguageSwitcher } from '@/shared/language/ui/language-switcher';
 import { Button } from '@/shared/shadcn-ui/button';
 
 import { DesktopNav } from './desktop-nav';
@@ -12,11 +13,14 @@ export function Header() {
       <div className='container mx-auto flex h-16 items-center justify-between p-4'>
         <Logo />
         <DesktopNav />
-        <div className='flex items-center gap-6 md:contents'>
+        <div className='flex items-center gap-6 lg:contents'>
           <MobileNav />
-          <Link href={'/login'}>
-            <Button>Вход</Button>
-          </Link>
+          <div className='flex items-center gap-6'>
+            <LanguageSwitcher />
+            <Link href={'/login'}>
+              <Button>Вход</Button>
+            </Link>
+          </div>
         </div>
       </div>
     </header>
diff --git a/src/widgets/header/ui/mobile-nav.tsx b/src/widgets/header/ui/mobile-nav.tsx
index 1fdd863..1e47b65 100644
--- a/src/widgets/header/ui/mobile-nav.tsx
+++ b/src/widgets/header/ui/mobile-nav.tsx
@@ -19,7 +19,7 @@ export function MobileNav() {
   return (
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>
-        <Button variant='ghost' className='md:hidden' size='icon'>
+        <Button variant='ghost' className='lg:hidden' size='icon'>
           <Menu className='h-6 w-6' />
           <span className='sr-only'>Открыть меню</span>
         </Button>