blob: 419f7d8d25dcbdb84b3ba2c7049bd4c51b05ac0b (
plain)
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
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 xl:max-2xl:max-w-[1200px] 2xl:max-w-[1500px]">
<div className="flex grow items-center gap-[30px] max-w-[750px]">
<Link href="/" className="shrink-0 ">
<Image
src="/icons/logo.svg"
alt="ARTBERRY"
width={46}
height={50}
className="h-[50]"
/>
</Link>
<div className="flex gap-[15px] grow min-w-[674px] items-center">
<Search />
<Button
variant={'icon'}
size={'icon'}
className="w-[50px] h-[50px] p-[15px]"
asChild
>
<ShuffleIcon width={20} height={19} strokeWidth={2} />
</Button>
<div className="gap-[20px] flex items-center shrink-0">
<div className="flex h-[22px] w-[66px] gap-2.5 opacity-100 items-center">
<span className="font-[500] h-[22] text-[16px]">
AI
</span>
<Switch />
</div>
<div className="flex h-[22px] gap-[10px] w-[99px] opacity-100 items-center">
<span className="font-[500] h-[22px] text-[16px]">
NSFW
</span>
<Switch />
</div>
</div>
</div>
</div>
<div className="flex gap-5 items-center shrink-0">
<Link href={'#'} className="hover:[&_path]:fill-light-violet">
<DiscordIcon />
</Link>
<ProfileOrLogin />
</div>
</div>
);
}
function Search() {
return (
<div className="flex w-[409px] h-[50px] border-2 rounded-4xl p-[15px]">
<div className="flex w-[379px] gap-[5px] items-center">
<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-[1] justify-between px-7.5 font-medium"></div>
);
}
|
