StepanovPlaton/torrent_frontend
1
0
Fork 0
mirror of https://github.com/StepanovPlaton/torrent_frontend.git synced 2026-04-03 12:20:48 +04:00
Code Issues Packages Projects Releases Wiki Activity

Learning about modal in next

Browse Source
This commit is contained in:
Степанов Платон
2024-05-15 16:28:27 +04:00
parent 0563abd669
commit d7f152c46a
6 changed files with 86 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/@auth/(.)login/page.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function Login() {
return <>123</>;
}

3
src/app/@auth/[...catchAll]/page.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function CatchAll() {
return null;
}

3
src/app/@auth/default.ts Normal file
View File

@@ -0,0 +1,3 @@
export default function Default() {
return null;
}

33
src/app/layout.tsx
View File

@@ -6,21 +6,24 @@ import { Header } from "@/widgets/header";
const inter = Inter({ subsets: ["latin"] });
export default function RootLayout({
children,
auth,
children,
}: Readonly<{
children: React.ReactNode;
auth: React.ReactNode;
children: React.ReactNode;
}>) {
return (
// suppressHydrationWarning for theme support
<html lang="ru" suppressHydrationWarning>
<body className={inter.className}>
<ThemeProvider enableSystem={false} defaultTheme="light">
<Header />
<div className="w-full h-full max-w-[var(--app-width)] m-auto">
{children}
</div>
</ThemeProvider>
</body>
</html>
);
return (
// suppressHydrationWarning for theme support
<html lang="ru" suppressHydrationWarning>
<body className={inter.className}>
<ThemeProvider enableSystem={false} defaultTheme="light">
{auth}
<Header />
<div className="w-full h-full max-w-[var(--app-width)] m-auto">
{children}
</div>
</ThemeProvider>
</body>
</html>
);
}

3
src/app/login/page.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function Login() {
return <>login page</>;
}

109
src/widgets/header/header.tsx
View File

@@ -8,64 +8,67 @@ import { useSelectedLayoutSegment } from "next/navigation";
import clsx from "clsx";
const sections = [
{ title: "Игры", href: "games" },
{ title: "Фильмы", href: "films" },
{ title: "Аудиокниги", href: "audiobooks" },
{ title: "Игры", href: "games" },
{ title: "Фильмы", href: "films" },
{ title: "Аудиокниги", href: "audiobooks" },
];
export const Header = () => {
const currentPageName = useSelectedLayoutSegment();
const currentPageName = useSelectedLayoutSegment();
return (
<header className="w-full h-20 bg-bg1 sticky top-0 shadow-xl">
<div
className="w-full h-full max-w-[var(--app-width)] m-auto px-5
return (
<header className="w-full h-20 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 dsk: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 />
<span className="cursor-pointer flex items-center">
<PersonIcon className="mr-1 h-4 w-4" />
Войти
</span>
</span>
<label className="flex flex-col items-start relative w-36">
<input
className="peer/search w-full rounded-lg bg-bg4 px-2"
placeholder=" "
/>
<span
className="peer-focus/search:opacity-0
>
<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 dsk: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 />
<Link
href="/login"
className="group/login cursor-pointer flex items-center"
>
<PersonIcon className="mr-1 h-4 w-4" />
<span className="group-hover/login:underline">Войти</span>
</Link>
</span>
<label className="flex flex-col items-start relative w-36">
<input
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>
);
>
<SearchIcon className="w-4 h-4 mx-2" />
Поиск
</span>
</label>
</div>
</div>
</header>
);
};