diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/header/NavBar.tsx | 34 | ||||
| -rw-r--r-- | src/components/header/SubNav.tsx | 2 | ||||
| -rw-r--r-- | src/components/ui/switch.tsx | 2 |
3 files changed, 23 insertions, 15 deletions
diff --git a/src/components/header/NavBar.tsx b/src/components/header/NavBar.tsx index 34e9fd0..e83d238 100644 --- a/src/components/header/NavBar.tsx +++ b/src/components/header/NavBar.tsx @@ -7,8 +7,8 @@ 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] xl:max-w-[691] grow items-center gap-7.5"> + <div className="flex w-full justify-between py-7.5 h-[110] items-center xl: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" @@ -18,25 +18,33 @@ export function NavBar() { className="h-[50]" /> </Link> - <div className="flex gap-3.75 grow items-center"> + <div className="flex gap-[15px] grow min-w-[674px] items-center"> <Search /> - <Button variant={'icon'} size={'icon'} asChild> + <Button + variant={'icon'} + size={'icon'} + className="w-[50px] h-[50px] p-[15px]" + 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> + <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-[22] gap-2.5 opacity-100 items-center w-[66]"> - <span>NSFW</span> + <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> - <Sections /> <div className="flex gap-3.75 items-center shrink-0"> <Link href={'#'} className="hover:[&_path]:fill-light-violet"> <DiscordIcon /> @@ -49,8 +57,8 @@ export function NavBar() { function Search() { return ( - <div className="flex w-[409] xl:w-[350] h-[50] border-2 items-center rounded-4xl p-3.75"> - <div className="flex w-full gap-1.25"> + <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="" @@ -69,6 +77,6 @@ function Search() { function Sections() { return ( - <div className="flex grow min-w-75 max-w-[450] justify-between px-7.5 font-medium"></div> + <div className="flex grow min-w-75 max-w-[1] justify-between px-7.5 font-medium"></div> ); } diff --git a/src/components/header/SubNav.tsx b/src/components/header/SubNav.tsx index a446ff0..0961cc1 100644 --- a/src/components/header/SubNav.tsx +++ b/src/components/header/SubNav.tsx @@ -5,7 +5,7 @@ import { cn } from '@/lib/utils'; export function SubNav() { return ( - <div className="flex justify-between w-full"> + <div className="flex justify-between xl:w-[1200px] 2xl:w-[1500px] h-[50px]"> <SectionLink href="#" className="rounded-tl-[5px] rounded-bl-4xl"> ТЕГИ </SectionLink> diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx index 26fe2c3..1343d69 100644 --- a/src/components/ui/switch.tsx +++ b/src/components/ui/switch.tsx @@ -13,7 +13,7 @@ function Switch({ <SwitchPrimitive.Root data-slot="switch" className={cn( - 'peer data-[state=checked]:bg-violet data-[state=unchecked]:bg-light-violet focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[18px] w-10 shrink-0 items-center rounded-full border border-transparent transition-all duration-200 ease-out outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', + 'peer data-[state=checked]:bg-violet data-[state=unchecked]:bg-light-violet focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[18px] w-[40px] shrink-0 items-center rounded-full border border-transparent transition-all duration-200 ease-out outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className, )} {...props} |