src/components/header/SubNav.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

import Link from 'next/link';
import { Button } from '../ui';
import React from 'react';
import { cn } from '@/lib/utils';

export function SubNav() {
    return (
        <div className="flex justify-between w-full">
            <SectionLink href="#" className="rounded-tl-[5px] rounded-bl-4xl">
                ТЕГИ
            </SectionLink>
            <SectionLink href="#" className="border-x border-light-violet">
                КАТЕГОРИИ
            </SectionLink>
            <SectionLink href="#" className="border-x border-light-violet">
                ПЕРСОНАЖИ
            </SectionLink>
            <SectionLink href="#" className="rounded-tr-[5px] rounded-br-4xl">
                КОЛЛЕКЦИИ
            </SectionLink>
        </div>
    );
}

function SectionLink({
    children,
    href,
    className,
}: React.PropsWithChildren & { href: string; className?: string }) {
    return (
        <Button
            asChild
            className={cn(
                'bg-violet grow py-3.5 w-full hover:bg-light-violet',
                className,
            )}
            variant={'ghost'}
            size={'text'}
        >
            <Link href={href}>{children}</Link>
        </Button>
    );
}