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() {
|
||||
return (
|
||||
<NavigationMenu className='hidden md:flex'>
|
||||
<NavigationMenu className='hidden lg:flex'>
|
||||
<NavigationMenuList>
|
||||
<NavigationMenuItem>
|
||||
<Link href='/' scroll>
|
||||
|
||||
@ -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,13 +13,16 @@ 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 />
|
||||
<div className='flex items-center gap-6'>
|
||||
<LanguageSwitcher />
|
||||
<Link href={'/login'}>
|
||||
<Button>Вход</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user