update: add language-switcher
This commit is contained in:
parent
adee43d2d6
commit
8f52988b6c
44
src/shared/language/ui/language-switcher.tsx
Normal file
44
src/shared/language/ui/language-switcher.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -14,7 +14,7 @@ import {
|
|||||||
|
|
||||||
export function DesktopNav() {
|
export function DesktopNav() {
|
||||||
return (
|
return (
|
||||||
<NavigationMenu className='hidden md:flex'>
|
<NavigationMenu className='hidden lg:flex'>
|
||||||
<NavigationMenuList>
|
<NavigationMenuList>
|
||||||
<NavigationMenuItem>
|
<NavigationMenuItem>
|
||||||
<Link href='/' scroll>
|
<Link href='/' scroll>
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
|
||||||
import { Logo } from '@/shared/assets/logo';
|
import { Logo } from '@/shared/assets/logo';
|
||||||
|
import { LanguageSwitcher } from '@/shared/language/ui/language-switcher';
|
||||||
import { Button } from '@/shared/shadcn-ui/button';
|
import { Button } from '@/shared/shadcn-ui/button';
|
||||||
|
|
||||||
import { DesktopNav } from './desktop-nav';
|
import { DesktopNav } from './desktop-nav';
|
||||||
@ -12,13 +13,16 @@ export function Header() {
|
|||||||
<div className='container mx-auto flex h-16 items-center justify-between p-4'>
|
<div className='container mx-auto flex h-16 items-center justify-between p-4'>
|
||||||
<Logo />
|
<Logo />
|
||||||
<DesktopNav />
|
<DesktopNav />
|
||||||
<div className='flex items-center gap-6 md:contents'>
|
<div className='flex items-center gap-6 lg:contents'>
|
||||||
<MobileNav />
|
<MobileNav />
|
||||||
|
<div className='flex items-center gap-6'>
|
||||||
|
<LanguageSwitcher />
|
||||||
<Link href={'/login'}>
|
<Link href={'/login'}>
|
||||||
<Button>Вход</Button>
|
<Button>Вход</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -19,7 +19,7 @@ export function MobileNav() {
|
|||||||
return (
|
return (
|
||||||
<Sheet open={open} onOpenChange={setOpen}>
|
<Sheet open={open} onOpenChange={setOpen}>
|
||||||
<SheetTrigger asChild>
|
<SheetTrigger asChild>
|
||||||
<Button variant='ghost' className='md:hidden' size='icon'>
|
<Button variant='ghost' className='lg:hidden' size='icon'>
|
||||||
<Menu className='h-6 w-6' />
|
<Menu className='h-6 w-6' />
|
||||||
<span className='sr-only'>Открыть меню</span>
|
<span className='sr-only'>Открыть меню</span>
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user