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"] }); const inter = Inter({ subsets: ["latin"] });
export default function RootLayout({ export default function RootLayout({
children, auth,
children,
}: Readonly<{ }: Readonly<{
children: React.ReactNode; auth: React.ReactNode;
children: React.ReactNode;
}>) { }>) {
return ( return (
// suppressHydrationWarning for theme support // suppressHydrationWarning for theme support
<html lang="ru" suppressHydrationWarning> <html lang="ru" suppressHydrationWarning>
<body className={inter.className}> <body className={inter.className}>
<ThemeProvider enableSystem={false} defaultTheme="light"> <ThemeProvider enableSystem={false} defaultTheme="light">
<Header /> {auth}
<div className="w-full h-full max-w-[var(--app-width)] m-auto"> <Header />
{children} <div className="w-full h-full max-w-[var(--app-width)] m-auto">
</div> {children}
</ThemeProvider> </div>
</body> </ThemeProvider>
</html> </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"; import clsx from "clsx";
const sections = [ const sections = [
{ title: "Игры", href: "games" }, { title: "Игры", href: "games" },
{ title: "Фильмы", href: "films" }, { title: "Фильмы", href: "films" },
{ title: "Аудиокниги", href: "audiobooks" }, { title: "Аудиокниги", href: "audiobooks" },
]; ];
export const Header = () => { export const Header = () => {
const currentPageName = useSelectedLayoutSegment(); const currentPageName = useSelectedLayoutSegment();
return ( return (
<header className="w-full h-20 bg-bg1 sticky top-0 shadow-xl"> <header className="w-full h-20 bg-bg1 sticky top-0 shadow-xl">
<div <div
className="w-full h-full max-w-[var(--app-width)] m-auto px-5 className="w-full h-full max-w-[var(--app-width)] m-auto px-5
flex items-center justify-between" flex items-center justify-between"
> >
<h1 className="text-4xl font-bold flex items-center"> <h1 className="text-4xl font-bold flex items-center">
<div className="lp:hidden"> <div className="lp:hidden">
<MobileMenu sections={sections} /> <MobileMenu sections={sections} />
</div> </div>
<Link href="/">.Torrent</Link> <Link href="/">.Torrent</Link>
</h1> </h1>
<div className="hidden text-2xl dsk:block"> <div className="hidden text-2xl dsk:block">
{sections.map((section) => ( {sections.map((section) => (
<Link <Link
key={section.title} key={section.title}
className={clsx( className={clsx(
"px-5 cursor-pointer hover:underline underline-offset-2", "px-5 cursor-pointer hover:underline underline-offset-2",
currentPageName === section.href && "underline" currentPageName === section.href && "underline"
)} )}
href={section.href} href={section.href}
> >
{section.title} {section.title}
</Link> </Link>
))} ))}
</div> </div>
<div className="flex flex-col items-end"> <div className="flex flex-col items-end">
<span className="flex items-center mb-1 "> <span className="flex items-center mb-1 ">
<SchemeSwitch /> <SchemeSwitch />
<span className="cursor-pointer flex items-center"> <Link
<PersonIcon className="mr-1 h-4 w-4" /> href="/login"
Войти className="group/login cursor-pointer flex items-center"
</span> >
</span> <PersonIcon className="mr-1 h-4 w-4" />
<label className="flex flex-col items-start relative w-36"> <span className="group-hover/login:underline">Войти</span>
<input </Link>
className="peer/search w-full rounded-lg bg-bg4 px-2" </span>
placeholder=" " <label className="flex flex-col items-start relative w-36">
/> <input
<span className="peer/search w-full rounded-lg bg-bg4 px-2"
className="peer-focus/search:opacity-0 placeholder=" "
/>
<span
className="peer-focus/search:opacity-0
peer-[:not(:placeholder-shown)]/search:opacity-0 peer-[:not(:placeholder-shown)]/search:opacity-0
transition-opacity h-0 flex items-center relative bottom-3" transition-opacity h-0 flex items-center relative bottom-3"
> >
<SearchIcon className="w-4 h-4 mx-2" /> <SearchIcon className="w-4 h-4 mx-2" />
Поиск Поиск
</span> </span>
</label> </label>
</div> </div>
</div> </div>
</header> </header>
); );
}; };