5 files changed, 157 insertions, 0 deletions
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
new file mode 100644
index 0000000..b096bdb
--- /dev/null
+++ b/src/components/header/Header.tsx
@@ -0,0 +1,10 @@
+import { NavBar, SubNav } from '.';
+
+export function Header() {
+    return (
+        <div className="flex flex-col w-full">
+            <NavBar />
+            <SubNav />
+        </div>
+    );
+}
diff --git a/src/components/header/NavBar.tsx b/src/components/header/NavBar.tsx
new file mode 100644
index 0000000..f186904
--- /dev/null
+++ b/src/components/header/NavBar.tsx
@@ -0,0 +1,75 @@
+//import { ShuffleIcon } from 'lucide-react';
+import ShuffleIcon from '@icons/ShuffleIcon.svg';
+import Image from 'next/image';
+import { Button, Input } from '../ui';
+import { ProfileOrLogin } from './ProfileOrLogin';
+import Link from 'next/link';
+import DiscordIcon from '@icons/discord.svg';
+import { Switch } from '@/components/ui/switch';
+export function NavBar() {
+    return (
+        <div className="flex w-full justify-between py-7.5 h-[110] items-center">
+            <div className="flex min-w-[267] max-w-[750] grow items-center gap-7.5">
+                <Link href="/" className="shrink-0 ">
+                    <Image
+                        src="/icons/logo.svg"
+                        alt="ARTBERRY"
+                        width={46}
+                        height={50}
+                        className="h-[50]"
+                    />
+                </Link>
+                <div className="flex gap-3.75 grow items-center">
+                    <Search />
+                    <Button variant={'icon'} size={'icon'} asChild>
+                        <ShuffleIcon width={20} height={19} strokeWidth={2} />
+                    </Button>
+                    <div className="gap-[20] flex items-center shrink-0 w-[185]">
+                        <div className="flex h-[22] gap-2.5 opacity-100 items-center w-[66]">
+                            <span>AI</span>
+                            <Switch />
+                        </div>
+                        <div className="flex h-[22] gap-2.5 opacity-100 items-center w-[66]">
+                            <span>NSFW</span>
+                            <Switch />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <Sections />
+            <div className="flex gap-3.75 items-center shrink-0">
+                <Link href={'#'} className="hover:[&_path]:fill-light-violet">
+                    <DiscordIcon />
+                </Link>
+                <ProfileOrLogin />
+            </div>
+        </div>
+    );
+}
+
+function Search() {
+    return (
+        <div className="flex w-[409] h-[50] border-2 items-center rounded-4xl p-3.75">
+            <div className="flex w-full gap-1.25">
+                <Image
+                    src="/icons/search.svg"
+                    alt=""
+                    width={24}
+                    height={24}
+                    className="h-[24] w-[24]"
+                />
+                <Input
+                    placeholder="Поиск"
+                    className="text-light-violet placeholder:text-light-violet text-sm"
+                />
+            </div>
+        </div>
+    );
+}
+
+function Sections() {
+    return (
+        <div className="flex grow min-w-75 max-w-[450] justify-between px-7.5 font-medium"></div>
+    );
+}
diff --git a/src/components/header/ProfileOrLogin.tsx b/src/components/header/ProfileOrLogin.tsx
new file mode 100644
index 0000000..38c1eb1
--- /dev/null
+++ b/src/components/header/ProfileOrLogin.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import Image from 'next/image';
+import { useUser } from '../../lib/contexts';
+import { Button } from '../ui';
+import Link from 'next/link';
+
+export function ProfileOrLogin() {
+    const user = useUser();
+
+    if (!user) {
+        return <Button className="py-2.5 px-3.75">ВОЙТИ</Button>;
+    }
+
+    return (
+        <Link href={'/profile'}>
+            <Image
+                src={user?.avatar ?? 'icons/avatar.svg'}
+                alt=""
+                width={60}
+                height={60}
+            />
+        </Link>
+    );
+}
diff --git a/src/components/header/SubNav.tsx b/src/components/header/SubNav.tsx
new file mode 100644
index 0000000..a446ff0
--- /dev/null
+++ b/src/components/header/SubNav.tsx
@@ -0,0 +1,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>
+    );
+}
diff --git a/src/components/header/index.ts b/src/components/header/index.ts
new file mode 100644
index 0000000..3a75160
--- /dev/null
+++ b/src/components/header/index.ts
@@ -0,0 +1,4 @@
+export * from './Header';
+export * from './ProfileOrLogin';
+export * from './NavBar';
+export * from './SubNav';