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

Add header and themes

Browse Source
This commit is contained in:
Степанов Платон
2024-05-08 22:50:44 +04:00
parent 9a3d900d1b
commit a634c194fe
19 changed files with 255 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
lint-staged.config.js
View File

@@ -1,13 +0,0 @@
module.exports = {
// this will check Typescript files
"**/*.(ts|tsx)": () => "npx tsc --noEmit",
// This will lint and format TypeScript and //JavaScript files
"**/*.(ts|tsx|js)": filenames => [
`npx eslint --fix ${filenames.join(" ")}`,
`npx prettier --write ${filenames.join(" ")}`,
],
// this will Format MarkDown and JSON
"**/*.(md|json)": filenames => `npx prettier --write ${filenames.join(" ")}`,
};

10
package-lock.json generated
View File

@@ -9,6 +9,7 @@
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"next": "14.2.3", "next": "14.2.3",
"next-themes": "^0.3.0",
"react": "^18", "react": "^18",
"react-dom": "^18" "react-dom": "^18"
}, },
@@ -3157,6 +3158,15 @@
} }
} }
}, },
"node_modules/next-themes": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz",
"integrity": "sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==",
"peerDependencies": {
"react": "^16.8 || ^17 || ^18",
"react-dom": "^16.8 || ^17 || ^18"
}
},
"node_modules/next/node_modules/postcss": { "node_modules/next/node_modules/postcss": {
"version": "8.4.31", "version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",

11
package.json
View File

@@ -9,18 +9,19 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"next": "14.2.3",
"next-themes": "^0.3.0",
"react": "^18", "react": "^18",
"react-dom": "^18", "react-dom": "^18"
"next": "14.2.3"
}, },
"devDependencies": { "devDependencies": {
"typescript": "^5",
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^18", "@types/react": "^18",
"@types/react-dom": "^18", "@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.2.3",
"postcss": "^8", "postcss": "^8",
"tailwindcss": "^3.4.1", "tailwindcss": "^3.4.1",
"eslint": "^8", "typescript": "^5"
"eslint-config-next": "14.2.3"
} }
} }

50
src/app/globals.css
View File

@@ -3,31 +3,41 @@
@tailwind utilities; @tailwind utilities;
:root { :root {
--foreground-rgb: 0, 0, 0; --color-bg0: #fbf1c7;
--background-start-rgb: 214, 219, 220; --color-bg1: #ebdbb2;
--background-end-rgb: 255, 255, 255; --color-bg4: #a89984;
--color-fg0: #282828;
--color-fg1: #3c3836;
--color-fg4: #7c6f64;
--app-width: 70%;
font-size: calc((100vh / 1080) * 24);
} }
@media (prefers-color-scheme: dark) { [data-theme="dark"] {
:root { --color-bg0: #282828;
--foreground-rgb: 255, 255, 255; --color-bg1: #3c3836;
--background-start-rgb: 0, 0, 0; --color-bg4: #7c6f64;
--background-end-rgb: 0, 0, 0;
--color-fg0: #fbf1c7;
--color-fg1: #ebdbb2;
--color-fg4: #a89984;
} }
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
} }
body { body {
color: rgb(var(--foreground-rgb)); transition-property: color, background-color, border-color;
background: linear-gradient( transition-duration: 0.3s;
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
}
@layer utilities { overflow: hidden;
.text-balance { color: var(--color-fg1);
text-wrap: balance; background-color: var(--color-bg0);
}
} }

16
src/app/layout.tsx
View File

@@ -1,12 +1,14 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { ThemeProvider } from "next-themes";
import { Header } from "@/widgets/header";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Create Next App", title: ".Torrent",
description: "Generated by create next app", description: ".torrent file sharing service",
}; };
export default function RootLayout({ export default function RootLayout({
@@ -15,8 +17,14 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="en"> // suppressHydrationWarning only for html for theme support
<body className={inter.className}>{children}</body> <html lang="ru" suppressHydrationWarning>
<body className={inter.className}>
<ThemeProvider enableSystem={false} defaultTheme="light">
<Header />
{children}
</ThemeProvider>
</body>
</html> </html>
); );
} }

8
src/app/page.tsx
View File

@@ -1,3 +1,9 @@
import { Section } from "@/widgets/section";
export default function Home() { export default function Home() {
return <></>; return (
<div className="w-full max-w-[var(--app-width)] m-auto">
<Section name="Игры">a</Section>
</div>
);
} }

3
src/features/gameCard/gameCard.tsx Normal file
View File

@@ -0,0 +1,3 @@
export const GameCard = () => {
return <></>;
};

3
src/features/gameCard/index.ts Normal file
View File

@@ -0,0 +1,3 @@
import { GameCard } from "./gameCard";
export { GameCard };

3
src/features/schemeSwitch/index.ts Normal file
View File

@@ -0,0 +1,3 @@
import { SchemeSwitch } from "./schemeSwitch";
export { SchemeSwitch };

17
src/features/schemeSwitch/schemeSwitch.tsx Normal file
View File

@@ -0,0 +1,17 @@
"use client";
import { SunIcon } from "@/shared/assets/icons";
import { useTheme } from "next-themes";
export const SchemeSwitch = () => {
const { theme, setTheme } = useTheme();
return (
<>
<SunIcon
className="mr-5 h-8 w-8 cursor-pointer"
onClick={() => setTheme(theme == "light" ? "dark" : "light")}
/>
</>
);
};

5
src/shared/assets/icons/index.ts Normal file
View File

@@ -0,0 +1,5 @@
import { SearchIcon } from "./searchIcon";
import { PersonIcon } from "./personIcon";
import { SunIcon } from "./sunIcon";
export { SearchIcon, PersonIcon, SunIcon };

27
src/shared/assets/icons/personIcon.tsx Normal file
View File

@@ -0,0 +1,27 @@
export const PersonIcon = ({ className }: { className?: string }) => {
return (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<path
d="M7 6.6718C7.85087 6.6718 8.6669 6.32103 9.26856
5.69667C9.87022 5.07231 10.2082 4.22549 10.2082
3.34251C10.2082 2.45952 9.87022 1.6127 9.26856
0.988341C8.6669 0.363978 7.85087 0.0132141 7
0.0132141C6.14913 0.0132141 5.3331 0.363978 4.73144
0.988341C4.12978 1.6127 3.79177 2.45952 3.79177
3.34251C3.79177 4.22549 4.12978 5.07231 4.73144
5.69667C5.3331 6.32103 6.14913 6.6718 7 6.6718ZM7
8.13453C2.73445 8.13453 0 10.5773 0
11.7666V13.9875H14V11.7666C14 10.3283 11.4113
8.13453 7 8.13453Z"
fill="var(--color-fg1)"
/>
</svg>
);
};

25
src/shared/assets/icons/searchIcon.tsx Normal file
View File

@@ -0,0 +1,25 @@
import React from "react";
export const SearchIcon = ({ className }: { className?: string }) => {
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<path
d="M9 4C11.7614 4 14 6.23858 14 9M14.6588
14.6549L19 19M17 9C17 13.4183 13.4183
17 9 17C4.58172 17 1 13.4183 1 9C1
4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9Z"
stroke="var(--color-fg1)"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};

31
src/shared/assets/icons/sunIcon.tsx Normal file
View File

@@ -0,0 +1,31 @@
export const SunIcon = ({
className,
onClick,
}: {
className?: string;
onClick?: () => void;
}) => {
return (
<svg
width="800px"
height="800px"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
onClick={onClick}
>
<path
d="M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859
6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859
17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091
16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086
8 12 8C14.2091 8 16 9.79086 16 12Z"
stroke="var(--color-fg1)"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};

45
src/widgets/header/header.tsx Normal file
View File

@@ -0,0 +1,45 @@
import { SchemeSwitch } from "@/features/schemeSwitch";
import { PersonIcon, SearchIcon } from "@/shared/assets/icons";
export const Header = () => {
return (
<header className="w-full h-20 flex justify-around bg-bg1">
<div
className="w-full h-full max-w-[var(--app-width)]
flex items-center justify-between"
>
<h1 className="text-5xl font-bold">.Torrent</h1>
<div className="text-3xl">
{["Игры", "Фильмы", "Аудиокниги"].map((section) => (
<a key={section} className="px-2 cursor-pointer hover:underline">
{section}
</a>
))}
</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-all h-0 flex items-center relative bottom-3"
>
<SearchIcon className="w-4 h-4 mx-2" />
Поиск
</span>
</label>
</div>
</div>
</header>
);
};

3
src/widgets/header/index.ts Normal file
View File

@@ -0,0 +1,3 @@
import { Header } from "./header";
export { Header };

3
src/widgets/section/index.ts Normal file
View File

@@ -0,0 +1,3 @@
import { Section } from "./section";
export { Section };

15
src/widgets/section/section.tsx Normal file
View File

@@ -0,0 +1,15 @@
export const Section = ({
name,
children,
}: {
name: string;
children: React.ReactNode;
}) => {
return (
// open section onClick
<section className="w-full mt-8 cursor-pointer">
<h2 className="text-4xl">{name}</h2>
<div>{children}</div>
</section>
);
};

9
tailwind.config.ts
View File

@@ -5,6 +5,7 @@ const config: Config = {
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
"./src/**/*.{js,ts,jsx,tsx,mdx}",
], ],
theme: { theme: {
extend: { extend: {
@@ -13,6 +14,14 @@ const config: Config = {
"gradient-conic": "gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
}, },
colors: {
bg0: "var(--color-bg0)",
bg1: "var(--color-bg1)",
bg4: "var(--color-bg4)",
fg0: "var(--color-fg0)",
fg1: "var(--color-fg1)",
fg4: "var(--color-fg4)",
},
}, },
}, },
plugins: [], plugins: [],