mirror of
https://github.com/StepanovPlaton/torrent_frontend.git
synced 2026-04-03 20:30:48 +04:00
71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
"use client";
|
||
|
||
import { SchemeSwitch } from "@/features/colorSchemeSwitch";
|
||
import { SearchIcon } from "@/shared/assets/icons";
|
||
import { MobileMenu } from "./mobileMenu/mobileMenu";
|
||
import Link from "next/link";
|
||
import { useSelectedLayoutSegment } from "next/navigation";
|
||
import clsx from "clsx";
|
||
import { UserActivities } from "@/features/userActivities";
|
||
|
||
const sections = [
|
||
{ title: "Игры", href: "games" },
|
||
{ title: "Фильмы", href: "films" },
|
||
{ title: "Аудиокниги", href: "audiobooks" },
|
||
];
|
||
|
||
export const Header = () => {
|
||
const currentPageName = useSelectedLayoutSegment();
|
||
|
||
return (
|
||
<header className="w-full h-20 z-10 bg-bg1 sticky top-0 shadow-xl">
|
||
<div
|
||
className="w-full h-full max-w-[var(--app-width)] m-auto px-5
|
||
flex items-center justify-between"
|
||
>
|
||
<h1 className="text-4xl font-bold flex items-center">
|
||
<div className="lp:hidden">
|
||
<MobileMenu sections={sections} />
|
||
</div>
|
||
<Link href="/">.Torrent</Link>
|
||
</h1>
|
||
<div className="hidden text-2xl lp:block">
|
||
{sections.map((section) => (
|
||
<Link
|
||
key={section.title}
|
||
className={clsx(
|
||
"px-5 cursor-pointer hover:underline underline-offset-2",
|
||
currentPageName === section.href && "underline"
|
||
)}
|
||
href={section.href}
|
||
>
|
||
{section.title}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
<div className="flex flex-col items-end">
|
||
<span className="flex items-center mb-1 ">
|
||
<SchemeSwitch />
|
||
<UserActivities />
|
||
</span>
|
||
<label className="flex flex-col items-start relative w-36">
|
||
<input
|
||
type="search"
|
||
className="peer/search w-full rounded-lg bg-bg4 px-2"
|
||
placeholder=" "
|
||
/>
|
||
<span
|
||
className="peer-focus/search:opacity-0
|
||
peer-[:not(:placeholder-shown)]/search:opacity-0
|
||
transition-opacity h-0 flex items-center relative bottom-3"
|
||
>
|
||
<SearchIcon className="w-4 h-4 mx-2" />
|
||
Поиск
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
);
|
||
};
|