137 lines
4.6 KiB
TypeScript
137 lines
4.6 KiB
TypeScript
import Link from 'next/link';
|
|
import React from 'react';
|
|
|
|
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
|
import { cn } from '@/shared/lib/utils';
|
|
import {
|
|
NavigationMenu,
|
|
NavigationMenuContent,
|
|
NavigationMenuItem,
|
|
NavigationMenuLink,
|
|
NavigationMenuList,
|
|
NavigationMenuTrigger,
|
|
navigationMenuTriggerStyle,
|
|
} from '@/shared/shadcn-ui/navigation-menu';
|
|
|
|
export function DesktopNav() {
|
|
const { t } = useTextController();
|
|
|
|
return (
|
|
<NavigationMenu className='hidden lg:flex'>
|
|
<NavigationMenuList>
|
|
<NavigationMenuItem>
|
|
<Link href='/' scroll>
|
|
<NavigationMenuLink
|
|
asChild
|
|
className={navigationMenuTriggerStyle()}
|
|
>
|
|
<span>{t('common.navigation.home')}</span>
|
|
</NavigationMenuLink>
|
|
</Link>
|
|
</NavigationMenuItem>
|
|
<NavigationMenuItem>
|
|
<Link href='/#stations' scroll>
|
|
<NavigationMenuLink
|
|
asChild
|
|
className={navigationMenuTriggerStyle()}
|
|
>
|
|
<span>{t('common.navigation.stations')}</span>
|
|
</NavigationMenuLink>
|
|
</Link>
|
|
</NavigationMenuItem>
|
|
<NavigationMenuItem>
|
|
<NavigationMenuTrigger>
|
|
{t('common.navigation.clients')}
|
|
</NavigationMenuTrigger>
|
|
<NavigationMenuContent>
|
|
<ul className='grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]'>
|
|
<li className='row-span-4'>
|
|
<NavigationMenuLink asChild>
|
|
<Link
|
|
className='flex h-full w-full flex-col justify-end rounded-md bg-gradient-to-b from-red-500 to-red-700 p-6 no-underline outline-none select-none focus:shadow-md'
|
|
href='/clients'
|
|
>
|
|
<div className='mt-4 mb-2 text-lg font-medium text-white'>
|
|
{t('clients.title')}
|
|
</div>
|
|
<p className='text-sm leading-tight text-white/90'>
|
|
{t('clients.description')}
|
|
</p>
|
|
</Link>
|
|
</NavigationMenuLink>
|
|
</li>
|
|
<ListItem href='/clients/loyalty' title='Программа лояльности'>
|
|
{t('clients.header.loyalty.description')}
|
|
</ListItem>
|
|
<ListItem href='/clients/certificates' title='Сертификаты'>
|
|
{t('clients.header.certificates.description')}
|
|
</ListItem>
|
|
</ul>
|
|
</NavigationMenuContent>
|
|
</NavigationMenuItem>
|
|
<NavigationMenuItem>
|
|
<Link href='/#vacancies' scroll={true}>
|
|
<NavigationMenuLink
|
|
asChild
|
|
className={navigationMenuTriggerStyle()}
|
|
>
|
|
<span>{t('common.navigation.vacancies')}</span>
|
|
</NavigationMenuLink>
|
|
</Link>
|
|
</NavigationMenuItem>
|
|
<NavigationMenuItem>
|
|
<Link href='/#promotions' scroll>
|
|
<NavigationMenuLink
|
|
asChild
|
|
className={navigationMenuTriggerStyle()}
|
|
>
|
|
<span>{t('common.navigation.promotions')}</span>
|
|
</NavigationMenuLink>
|
|
</Link>
|
|
</NavigationMenuItem>
|
|
<NavigationMenuItem>
|
|
<Link href='/about' scroll>
|
|
<NavigationMenuLink
|
|
asChild
|
|
className={navigationMenuTriggerStyle()}
|
|
>
|
|
<span>{t('common.navigation.about')}</span>
|
|
</NavigationMenuLink>
|
|
</Link>
|
|
</NavigationMenuItem>
|
|
</NavigationMenuList>
|
|
</NavigationMenu>
|
|
);
|
|
}
|
|
|
|
interface ListItemProps extends React.ComponentPropsWithoutRef<'a'> {
|
|
title: string;
|
|
href: string;
|
|
}
|
|
|
|
const ListItem = React.forwardRef<React.ComponentRef<'a'>, ListItemProps>(
|
|
({ className, title, children, href, ...props }, ref) => {
|
|
return (
|
|
<li>
|
|
<NavigationMenuLink asChild>
|
|
<a
|
|
ref={ref}
|
|
href={href}
|
|
className={cn(
|
|
'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block space-y-1 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none',
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
<div className='text-sm leading-none font-medium'>{title}</div>
|
|
<p className='text-muted-foreground line-clamp-2 text-sm leading-snug'>
|
|
{children}
|
|
</p>
|
|
</a>
|
|
</NavigationMenuLink>
|
|
</li>
|
|
);
|
|
},
|
|
);
|
|
ListItem.displayName = 'ListItem';
|