init

1 files changed, 75 insertions, 0 deletions

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>
+    );
+}