mirror of
https://github.com/StepanovPlaton/torrent_frontend.git
synced 2026-04-03 12:20:48 +04:00
Add masonry layout and small fixes
This commit is contained in:
16
package-lock.json
generated
16
package-lock.json
generated
@@ -13,12 +13,14 @@
|
||||
"next-themes": "^0.3.0",
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"react-responsive-masonry": "^2.2.0",
|
||||
"zod": "^3.23.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
"@types/react-responsive-masonry": "^2.1.3",
|
||||
"eslint": "^8",
|
||||
"eslint-config-next": "14.2.3",
|
||||
"postcss": "^8",
|
||||
@@ -485,6 +487,15 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-responsive-masonry": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-responsive-masonry/-/react-responsive-masonry-2.1.3.tgz",
|
||||
"integrity": "sha512-aOFUtv3QwNMmy0BgpQpvivQ/+vivMTB6ARrzf9eTSXsLzXpVnfEtjpHpSknYDnr8KaQmlgeauAj8E7wo/qMOTg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/parser": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.2.0.tgz",
|
||||
@@ -3744,6 +3755,11 @@
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/react-responsive-masonry": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-responsive-masonry/-/react-responsive-masonry-2.2.0.tgz",
|
||||
"integrity": "sha512-IYbnfe2tWCZ3pvyTLyBWPj7uv5ZmNOULYMcAZi5a47ZLhSotOck1vkkISq6gP2qiyWdMvPfeMhjvYzUYGw9BOQ=="
|
||||
},
|
||||
"node_modules/read-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
|
||||
@@ -14,12 +14,14 @@
|
||||
"next-themes": "^0.3.0",
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"react-responsive-masonry": "^2.2.0",
|
||||
"zod": "^3.23.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
"@types/react-responsive-masonry": "^2.1.3",
|
||||
"eslint": "^8",
|
||||
"eslint-config-next": "14.2.3",
|
||||
"postcss": "^8",
|
||||
|
||||
@@ -1,126 +1,130 @@
|
||||
import { GameService } from "@/entities/game";
|
||||
import { GameCard } from "@/features/gameCard";
|
||||
import { getYouTubeID } from "@/shared/utils";
|
||||
import { Section } from "@/widgets/section";
|
||||
import clsx from "clsx";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
export default async function Games({
|
||||
params: { game_id },
|
||||
params: { game_id },
|
||||
}: {
|
||||
params: { game_id: number };
|
||||
params: { game_id: number };
|
||||
}) {
|
||||
const gameCards = await GameService.getGameCards();
|
||||
const game = await GameService.getGame(game_id);
|
||||
return (
|
||||
<>
|
||||
{game && (
|
||||
<div className="p-4 flex flex-col lp:block">
|
||||
{game.cover && (
|
||||
<div className="lp:w-[60%] lp:px-4 lp:pl-0 pt-2 float-left">
|
||||
<Image
|
||||
src={game.cover}
|
||||
className="rounded-lg aspect-video object-cover"
|
||||
alt=""
|
||||
width={1280}
|
||||
height={720}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<span className="pt-2 lp:max-w-[40%]">
|
||||
<h1 className="text-4xl">{game.title}</h1>
|
||||
{game.description && (
|
||||
<p className="text-md text-justify text-fg4 pt-2">
|
||||
{game.description}
|
||||
</p>
|
||||
)}
|
||||
</span>
|
||||
<div className="flex justify-between pt-6">
|
||||
{[
|
||||
[
|
||||
{ name: "Система", value: game.system },
|
||||
{ name: "Процессор", value: game.processor },
|
||||
{ name: "Оперативная память", value: game.memory },
|
||||
{ name: "Видеокарта", value: game.graphics },
|
||||
{ name: "Место на диске", value: game.storage },
|
||||
],
|
||||
[
|
||||
{
|
||||
name: "Версия игры",
|
||||
value: `${
|
||||
game.version
|
||||
} (обновлена ${game.update_date.toLocaleDateString(
|
||||
"ru-ru"
|
||||
)})`,
|
||||
},
|
||||
{ name: "Язык", value: game.language },
|
||||
{ name: "Разработчик", value: game.developer },
|
||||
{
|
||||
name: "Год выхода",
|
||||
value: game.release_date.toLocaleDateString("en-us", {
|
||||
year: "numeric",
|
||||
}),
|
||||
},
|
||||
{ name: "Объём загрузки", value: game.download_size },
|
||||
],
|
||||
].map((section, i) => (
|
||||
<ul key={i} className="w-[48%] bg-bg1 rounded-lg py-1 px-4">
|
||||
{section.map((req) => (
|
||||
<li
|
||||
key={req.name}
|
||||
className="font-bold text-sm lp:text-md py-1"
|
||||
>
|
||||
{req.name + ": "}
|
||||
<span
|
||||
className={clsx(
|
||||
"font-normal",
|
||||
req.value === undefined && "text-fg4"
|
||||
)}
|
||||
>
|
||||
{req.value ?? "Не известно"}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
))}
|
||||
</div>
|
||||
{game.trailer && (
|
||||
<iframe
|
||||
src={game.trailer.replace("/watch?v=", "/embed/")}
|
||||
className="w-full aspect-video rounded-lg my-4"
|
||||
allowFullScreen
|
||||
/>
|
||||
)}
|
||||
<div className="relative w-full flex items-center justify-around">
|
||||
<Link
|
||||
href={
|
||||
process.env.NEXT_PUBLIC_CONTENT_URL + "/" + game.torrent_file
|
||||
}
|
||||
className="p-4 bg-ac0 text-fg1 text-xl rounded-lg"
|
||||
>
|
||||
Скачать {game.title}.torrent
|
||||
</Link>
|
||||
</div>
|
||||
<div className="w-full flex justify-end">
|
||||
<Link className="text-right text-sm" href="/how_to_download">
|
||||
Как скачать игру
|
||||
<br /> с помощью .torrent файла?
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
const gameCards = await GameService.getGameCards();
|
||||
const game = await GameService.getGame(game_id);
|
||||
return (
|
||||
<>
|
||||
{game && (
|
||||
<div className="p-4 flex flex-col lp:block">
|
||||
{game.cover && (
|
||||
<div className="lp:w-[60%] lp:px-4 lp:pl-0 py-2 float-left">
|
||||
<Image
|
||||
src={game.cover}
|
||||
className="rounded-lg w-full object-contain"
|
||||
alt=""
|
||||
width={1280}
|
||||
height={720}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<span className="lp:max-w-[40%]">
|
||||
<h1 className="text-4xl">{game.title}</h1>
|
||||
{game.description && (
|
||||
<p className="text-md text-justify text-fg4 pt-2">
|
||||
{game.description}
|
||||
</p>
|
||||
)}
|
||||
</span>
|
||||
<div className="w-full flex justify-between pt-4">
|
||||
{[
|
||||
[
|
||||
{ name: "Система", value: game.system },
|
||||
{ name: "Процессор", value: game.processor },
|
||||
{ name: "Оперативная память", value: game.memory },
|
||||
{ name: "Видеокарта", value: game.graphics },
|
||||
{ name: "Место на диске", value: game.storage },
|
||||
],
|
||||
[
|
||||
{
|
||||
name: "Версия игры",
|
||||
value: `${
|
||||
game.version
|
||||
} (обновлена ${game.update_date.toLocaleDateString(
|
||||
"ru-ru"
|
||||
)})`,
|
||||
},
|
||||
{ name: "Язык", value: game.language },
|
||||
{ name: "Разработчик", value: game.developer },
|
||||
{
|
||||
name: "Год выхода",
|
||||
value: game.release_date.toLocaleDateString("en-us", {
|
||||
year: "numeric",
|
||||
}),
|
||||
},
|
||||
{ name: "Объём загрузки", value: game.download_size },
|
||||
],
|
||||
].map((section, i) => (
|
||||
<ul key={i} className="w-[48%] bg-bg1 rounded-lg py-1 px-4">
|
||||
{section.map((req) => (
|
||||
<li
|
||||
key={req.name}
|
||||
className="font-bold text-sm lp:text-md py-1"
|
||||
>
|
||||
{req.name + ": "}
|
||||
<span
|
||||
className={clsx(
|
||||
"font-normal",
|
||||
req.value === undefined && "text-fg4"
|
||||
)}
|
||||
>
|
||||
{req.value ?? "Не известно"}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
))}
|
||||
</div>
|
||||
{game.trailer && getYouTubeID(game.trailer) && (
|
||||
<iframe
|
||||
src={"https://youtube.com/embed/" + getYouTubeID(game.trailer)}
|
||||
className="w-full aspect-video rounded-lg mt-4"
|
||||
allowFullScreen
|
||||
/>
|
||||
)}
|
||||
<div className="relative w-full flex items-center justify-around pt-4">
|
||||
<Link
|
||||
href={
|
||||
process.env.NEXT_PUBLIC_CONTENT_URL + "/" + game.torrent_file
|
||||
}
|
||||
className="p-4 bg-ac0 text-fg1 text-2xl rounded-lg"
|
||||
>
|
||||
Скачать {game.title}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="w-full flex justify-end">
|
||||
<Link
|
||||
className="text-right text-sm relative top-4 lp:-top-4"
|
||||
href="/how_to_download"
|
||||
>
|
||||
Как скачать игру
|
||||
<br /> с помощью .torrent файла?
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{gameCards && (
|
||||
<Section
|
||||
name="Другие популярные игры"
|
||||
link="/games"
|
||||
invite_text={'Перейти в раздел "Игры"'}
|
||||
>
|
||||
{gameCards.map((card) => (
|
||||
<GameCard key={card.id} card={card} />
|
||||
))}
|
||||
</Section>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
{gameCards && (
|
||||
<Section
|
||||
name="Популярные игры"
|
||||
link="/games"
|
||||
invite_text={'Перейти в раздел "Игры"'}
|
||||
>
|
||||
{gameCards.map((card) => (
|
||||
<GameCard key={card.id} card={card} />
|
||||
))}
|
||||
</Section>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
--color-ac2: #8ec07c;
|
||||
|
||||
--app-width: 70%;
|
||||
font-size: calc((100vw / 1920) * 24);
|
||||
font-size: calc((100vw / 1920) * 20);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
@@ -50,19 +50,16 @@ body {
|
||||
background-color: var(--color-bg0);
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
:root {
|
||||
--app-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
:root {
|
||||
font-size: calc((100vw / 1920) * 56);
|
||||
--app-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
:root {
|
||||
font-size: calc((100vw / 1920) * 64);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,61 +1,61 @@
|
||||
import { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: ".Torrent: Как скачать?",
|
||||
description:
|
||||
".Torrent: Как скачать? - краткое руководство по скачиваю данных с помощью .torrent файлов",
|
||||
title: ".Torrent: Как скачать?",
|
||||
description:
|
||||
".Torrent: Как скачать? - краткое руководство по скачиваю данных с помощью .torrent файлов",
|
||||
};
|
||||
|
||||
export default async function HowToDownload() {
|
||||
return (
|
||||
<div className="w-full flex flex-col lp:flex-row justify-between p-4">
|
||||
<div className="w-full p-4 lp:w-[50%] lp:pr-10">
|
||||
<h1 className="text-4xl lp:text-3xl">Как скачать?</h1>
|
||||
<div className="text-fg4 text-justify pt-2">
|
||||
Чтобы скачать что-либо с помощью торрент-файла, выполните следующие
|
||||
шаги:
|
||||
<ul className="*:text-fg4">
|
||||
<li>
|
||||
1. Найдите и загрузите торрент-файл или magnet-ссылку, содержащую
|
||||
информацию о файле, который вы хотите скачать.
|
||||
</li>
|
||||
<li>
|
||||
2. Откройте программу-клиент для загрузки торрентов, например,
|
||||
uTorrent, BitTorrent или qBittorrent.
|
||||
</li>
|
||||
<li>
|
||||
3. В программе-клиенте выберите опцию "Open Torrent File" или "Add
|
||||
Torrent" и выберите торрент-файл, который вы скачали в первом
|
||||
шаге.
|
||||
</li>
|
||||
<li>
|
||||
4. После этого начнется загрузка файлов, указанных в
|
||||
торрент-файле. Вы также можете выбрать папку, куда сохранять
|
||||
скачанные файлы.
|
||||
</li>
|
||||
<li>
|
||||
5. Дождитесь завершения загрузки файлов. После этого вы сможете
|
||||
открыть и использовать скачанные файлы на своем компьютере.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full p-4 lp:w-[50%] lp:pl-10">
|
||||
<h2 className="text-4xl lp:text-3xl">Что такое .torrent файл?</h2>
|
||||
<p className="text-fg4 text-justify pt-2">
|
||||
Торрент-файл (или .torrent-файл) - это небольшой файл, который
|
||||
содержит метаданные о файле или наборе файлов, которые можно загрузить
|
||||
с помощью протокола BitTorrent. В торрент-файле обычно указан адрес
|
||||
трекера (специального сервера, отслеживающего пиров) и хеш-суммы
|
||||
частей файлов, которые необходимы для скачивания.
|
||||
<br />
|
||||
<br /> Пользователь, желающий загрузить файл через BitTorrent, сначала
|
||||
скачивает торрент-файл или magnet-ссылку, загружает ее в
|
||||
торрент-клиент (программу для скачивания торрентов), и затем начинает
|
||||
загрузку файлов, участвуя в обмене данными с другими пользователями
|
||||
(пирами) через сеть BitTorrent.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="w-full flex flex-col lp:flex-row justify-between p-4">
|
||||
<div className="w-full p-4 lp:w-[50%] lp:pr-10">
|
||||
<h1 className="text-4xl lp:text-3xl">Как скачать?</h1>
|
||||
<div className="text-fg4 text-justify pt-2">
|
||||
Чтобы скачать данные с помощью торрент-файла, выполните следующие
|
||||
шаги:
|
||||
<ul className="*:text-fg4">
|
||||
<li>
|
||||
1. Загрузите торрент-файл, содержащий информацию о файлах, которые
|
||||
вы хотите скачать с нашего сайта.
|
||||
</li>
|
||||
<li>
|
||||
2. Откройте программу-клиент для загрузки торрентов, например,
|
||||
uTorrent, BitTorrent или qBittorrent.
|
||||
</li>
|
||||
<li>
|
||||
3. В программе-клиенте выберите опцию "Open Torrent File" или "Add
|
||||
Torrent" и выберите торрент-файл, который вы скачали в первом
|
||||
шаге.
|
||||
</li>
|
||||
<li>
|
||||
4. После этого начнется загрузка файлов, указанных в
|
||||
торрент-файле. Вы также можете выбрать папку, куда сохранять
|
||||
скачанные файлы.
|
||||
</li>
|
||||
<li>
|
||||
5. Дождитесь завершения загрузки файлов. После этого вы сможете
|
||||
открыть и использовать скачанные файлы на своем компьютере.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full p-4 lp:w-[50%] lp:pl-10">
|
||||
<h2 className="text-4xl lp:text-3xl">Что такое .torrent файл?</h2>
|
||||
<p className="text-fg4 text-justify pt-2">
|
||||
Торрент-файл (или .torrent-файл) - это небольшой файл, который
|
||||
содержит метаданные о файле или наборе файлов, которые можно загрузить
|
||||
с помощью протокола BitTorrent. В торрент-файле обычно указан адрес
|
||||
трекера (специального сервера, отслеживающего пиров) и хеш-суммы
|
||||
частей файлов, которые необходимы для скачивания.
|
||||
<br />
|
||||
<br /> Пользователь, желающий загрузить файл через BitTorrent, сначала
|
||||
скачивает торрент-файл или magnet-ссылку, загружает ее в
|
||||
торрент-клиент (программу для скачивания торрентов), и затем начинает
|
||||
загрузку файлов, участвуя в обмене данными с другими пользователями
|
||||
(пирами) через сеть BitTorrent.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ThemeProvider } from "next-themes";
|
||||
@@ -6,28 +5,22 @@ import { Header } from "@/widgets/header";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: ".Torrent",
|
||||
description:
|
||||
".Torrent - сервис обмена .torrent файлами видеоигр, фильмов и аудиокниг",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: 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">
|
||||
<Header />
|
||||
<div className="w-full h-full max-w-[var(--app-width)] m-auto">
|
||||
{children}
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,22 +1,29 @@
|
||||
import { GameService } from "@/entities/game";
|
||||
import { GameCard } from "@/features/gameCard";
|
||||
import { Section } from "@/widgets/section";
|
||||
import { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: ".Torrent",
|
||||
description:
|
||||
".Torrent - сервис обмена .torrent файлами видеоигр, фильмов и аудиокниг",
|
||||
};
|
||||
|
||||
export default async function Home() {
|
||||
const gameCards = await GameService.getGameCards();
|
||||
return (
|
||||
<>
|
||||
{gameCards && gameCards.length > 0 && (
|
||||
<Section
|
||||
name="Игры"
|
||||
link="/games"
|
||||
invite_text={'Перейти в раздел "Игры"'}
|
||||
>
|
||||
{gameCards.map((card) => (
|
||||
<GameCard key={card.id} card={card} />
|
||||
))}
|
||||
</Section>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
const gameCards = await GameService.getGameCards();
|
||||
return (
|
||||
<>
|
||||
{gameCards && gameCards.length > 0 && (
|
||||
<Section
|
||||
name="Игры"
|
||||
link="/games"
|
||||
invite_text={'Перейти в раздел "Игры"'}
|
||||
>
|
||||
{gameCards.map((card) => (
|
||||
<GameCard key={card.id} card={card} />
|
||||
))}
|
||||
</Section>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,30 +3,30 @@ import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
export const GameCard = ({ card }: { card: GameCardType }) => {
|
||||
return (
|
||||
<Link className="group/gamecard cursor-pointer" href={"/games/" + card.id}>
|
||||
{!!card.cover_preview && (
|
||||
<Image
|
||||
src={card.cover_preview}
|
||||
className="rounded-lg"
|
||||
alt=""
|
||||
width={700}
|
||||
height={400}
|
||||
/>
|
||||
)}
|
||||
<div className="flex items-center justify-between pr-2">
|
||||
<h2 className="text-2xl py-1 group-hover/gamecard:underline underline-offset-4">
|
||||
{card.title}
|
||||
</h2>
|
||||
{card.version && (
|
||||
<span className="text-xs max-w-[30%] line-clamp-2 text-fg4">
|
||||
{card.version}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-lg tb:text-sm pr-2 text-justify line-clamp-5 text-fg4">
|
||||
{card.description}
|
||||
</p>
|
||||
</Link>
|
||||
);
|
||||
return (
|
||||
<Link className="group/gamecard cursor-pointer" href={"/games/" + card.id}>
|
||||
{!!card.cover_preview && (
|
||||
<Image
|
||||
src={card.cover_preview}
|
||||
className="rounded-lg object-contain"
|
||||
alt=""
|
||||
width={1280}
|
||||
height={720}
|
||||
/>
|
||||
)}
|
||||
<div className="flex items-center justify-between pr-2">
|
||||
<h2 className="text-3xl tb:text-xl py-1 group-hover/gamecard:underline underline-offset-4">
|
||||
{card.title}
|
||||
</h2>
|
||||
{card.version && (
|
||||
<span className="text-xs max-w-[30%] text-right line-clamp-2 text-fg4">
|
||||
{card.version}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-lg tb:text-sm pr-2 text-justify line-clamp-5 text-fg4">
|
||||
{card.description}
|
||||
</p>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
6
src/shared/utils/get_youtube_id.ts
Normal file
6
src/shared/utils/get_youtube_id.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export const getYouTubeID = (url: string) => {
|
||||
const regExp =
|
||||
/^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
|
||||
const match = url.match(regExp);
|
||||
return match && match[7].length == 11 ? match[7] : false;
|
||||
};
|
||||
3
src/shared/utils/index.ts
Normal file
3
src/shared/utils/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import { getYouTubeID } from "./get_youtube_id";
|
||||
|
||||
export { getYouTubeID };
|
||||
@@ -1,62 +1,71 @@
|
||||
"use client";
|
||||
|
||||
import { SchemeSwitch } from "@/features/colorSchemeSwitch";
|
||||
import { PersonIcon, SearchIcon } from "@/shared/assets/icons";
|
||||
import { MobileMenu } from "./mobileMenu/mobileMenu";
|
||||
import Link from "next/link";
|
||||
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 = () => {
|
||||
return (
|
||||
<header className="w-full h-20 bg-bg1 sticky top-0">
|
||||
<div
|
||||
className="w-full h-full max-w-[var(--app-width)] m-auto px-5
|
||||
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
|
||||
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="px-5 cursor-pointer hover: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 />
|
||||
<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
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
|
||||
|
||||
export const Section = ({
|
||||
name,
|
||||
@@ -17,7 +18,7 @@ export const Section = ({
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<section className="w-full h-fit p-5 mb-20 pt-8">
|
||||
<section className="w-full h-fit p-2 mb-20 pt-8">
|
||||
{name && (
|
||||
<h2
|
||||
className="text-4xl pb-2 cursor-pointer w-fit"
|
||||
@@ -26,12 +27,15 @@ export const Section = ({
|
||||
{name}
|
||||
</h2>
|
||||
)}
|
||||
<div className="grid grid-cols-1 tb:grid-cols-2 lp:grid-cols-3 gap-y-10 gap-x-3">
|
||||
{children}
|
||||
</div>
|
||||
<ResponsiveMasonry columnsCountBreakPoints={{ 0: 1, 640: 2, 1024: 3 }}>
|
||||
<Masonry gutter="1rem">{children}</Masonry>
|
||||
</ResponsiveMasonry>
|
||||
{link && invite_text && (
|
||||
<div className="w-full flex justify-end pt-5">
|
||||
<Link href={link} className="text-lg">
|
||||
<Link
|
||||
href={link}
|
||||
className="text-lg hover:underline underline-offset-4"
|
||||
>
|
||||
{invite_text}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user