136 lines
4.7 KiB
TypeScript
136 lines
4.7 KiB
TypeScript
import Link from 'next/link';
|
||
import React from 'react';
|
||
|
||
import { cn } from '@/shared/lib/utils';
|
||
import {
|
||
NavigationMenu,
|
||
NavigationMenuContent,
|
||
NavigationMenuItem,
|
||
NavigationMenuLink,
|
||
NavigationMenuList,
|
||
NavigationMenuTrigger,
|
||
navigationMenuTriggerStyle,
|
||
} from '@/shared/shadcn-ui/navigation-menu';
|
||
import { useLanguage } from '@/shared/language';
|
||
|
||
export function DesktopNav() {
|
||
|
||
const { t } = useLanguage();
|
||
|
||
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='Программа лояльности'>
|
||
Накапливайте баллы и получайте скидки на топливо и услуги
|
||
</ListItem>
|
||
<ListItem href='/clients/certificates' title='Сертификаты'>
|
||
Подарочные сертификаты на топливо и услуги нашей сети
|
||
</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';
|