diff --git a/lint-staged.config.js b/lint-staged.config.js deleted file mode 100644 index e83497f..0000000 --- a/lint-staged.config.js +++ /dev/null @@ -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(" ")}`, -}; diff --git a/package-lock.json b/package-lock.json index 90304e6..63e1cfc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "next": "14.2.3", + "next-themes": "^0.3.0", "react": "^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": { "version": "8.4.31", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", diff --git a/package.json b/package.json index 34f582a..87c2704 100644 --- a/package.json +++ b/package.json @@ -9,18 +9,19 @@ "lint": "next lint" }, "dependencies": { + "next": "14.2.3", + "next-themes": "^0.3.0", "react": "^18", - "react-dom": "^18", - "next": "14.2.3" + "react-dom": "^18" }, "devDependencies": { - "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "eslint": "^8", + "eslint-config-next": "14.2.3", "postcss": "^8", "tailwindcss": "^3.4.1", - "eslint": "^8", - "eslint-config-next": "14.2.3" + "typescript": "^5" } } diff --git a/src/app/globals.css b/src/app/globals.css index 875c01e..c3a2e24 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -3,31 +3,41 @@ @tailwind utilities; :root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; + --color-bg0: #fbf1c7; + --color-bg1: #ebdbb2; + --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) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - } +[data-theme="dark"] { + --color-bg0: #282828; + --color-bg1: #3c3836; + --color-bg4: #7c6f64; + + --color-fg0: #fbf1c7; + --color-fg1: #ebdbb2; + --color-fg4: #a89984; +} + +html, +body { + padding: 0; + margin: 0; + width: 100%; + height: 100%; } body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); -} + transition-property: color, background-color, border-color; + transition-duration: 0.3s; -@layer utilities { - .text-balance { - text-wrap: balance; - } + overflow: hidden; + color: var(--color-fg1); + background-color: var(--color-bg0); } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 3314e47..6522c94 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,12 +1,14 @@ import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; +import { ThemeProvider } from "next-themes"; +import { Header } from "@/widgets/header"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: ".Torrent", + description: ".torrent file sharing service", }; export default function RootLayout({ @@ -15,8 +17,14 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - - {children} + // suppressHydrationWarning only for html for theme support + + + +
+ {children} + + ); } diff --git a/src/app/page.tsx b/src/app/page.tsx index e47c513..74f814a 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,3 +1,9 @@ +import { Section } from "@/widgets/section"; + export default function Home() { - return <>; + return ( +
+
a
+
+ ); } diff --git a/src/features/gameCard/gameCard.tsx b/src/features/gameCard/gameCard.tsx new file mode 100644 index 0000000..a7383a2 --- /dev/null +++ b/src/features/gameCard/gameCard.tsx @@ -0,0 +1,3 @@ +export const GameCard = () => { + return <>; +}; diff --git a/src/features/gameCard/index.ts b/src/features/gameCard/index.ts new file mode 100644 index 0000000..fcda3e6 --- /dev/null +++ b/src/features/gameCard/index.ts @@ -0,0 +1,3 @@ +import { GameCard } from "./gameCard"; + +export { GameCard }; diff --git a/src/features/schemeSwitch/index.ts b/src/features/schemeSwitch/index.ts new file mode 100644 index 0000000..a04673c --- /dev/null +++ b/src/features/schemeSwitch/index.ts @@ -0,0 +1,3 @@ +import { SchemeSwitch } from "./schemeSwitch"; + +export { SchemeSwitch }; diff --git a/src/features/schemeSwitch/schemeSwitch.tsx b/src/features/schemeSwitch/schemeSwitch.tsx new file mode 100644 index 0000000..88fb430 --- /dev/null +++ b/src/features/schemeSwitch/schemeSwitch.tsx @@ -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 ( + <> + setTheme(theme == "light" ? "dark" : "light")} + /> + + ); +}; diff --git a/src/shared/assets/icons/index.ts b/src/shared/assets/icons/index.ts new file mode 100644 index 0000000..52b7ead --- /dev/null +++ b/src/shared/assets/icons/index.ts @@ -0,0 +1,5 @@ +import { SearchIcon } from "./searchIcon"; +import { PersonIcon } from "./personIcon"; +import { SunIcon } from "./sunIcon"; + +export { SearchIcon, PersonIcon, SunIcon }; diff --git a/src/shared/assets/icons/personIcon.tsx b/src/shared/assets/icons/personIcon.tsx new file mode 100644 index 0000000..db9111a --- /dev/null +++ b/src/shared/assets/icons/personIcon.tsx @@ -0,0 +1,27 @@ +export const PersonIcon = ({ className }: { className?: string }) => { + return ( + + + + ); +}; diff --git a/src/shared/assets/icons/searchIcon.tsx b/src/shared/assets/icons/searchIcon.tsx new file mode 100644 index 0000000..0cc34fa --- /dev/null +++ b/src/shared/assets/icons/searchIcon.tsx @@ -0,0 +1,25 @@ +import React from "react"; + +export const SearchIcon = ({ className }: { className?: string }) => { + return ( + + + + ); +}; diff --git a/src/shared/assets/icons/sunIcon.tsx b/src/shared/assets/icons/sunIcon.tsx new file mode 100644 index 0000000..cd0ef90 --- /dev/null +++ b/src/shared/assets/icons/sunIcon.tsx @@ -0,0 +1,31 @@ +export const SunIcon = ({ + className, + onClick, +}: { + className?: string; + onClick?: () => void; +}) => { + return ( + + + + ); +}; diff --git a/src/widgets/header/header.tsx b/src/widgets/header/header.tsx new file mode 100644 index 0000000..b1c5bf9 --- /dev/null +++ b/src/widgets/header/header.tsx @@ -0,0 +1,45 @@ +import { SchemeSwitch } from "@/features/schemeSwitch"; +import { PersonIcon, SearchIcon } from "@/shared/assets/icons"; + +export const Header = () => { + return ( +
+
+

.Torrent

+
+ {["Игры", "Фильмы", "Аудиокниги"].map((section) => ( + + {section} + + ))} +
+
+ + + + + Войти + + + +
+
+
+ ); +}; diff --git a/src/widgets/header/index.ts b/src/widgets/header/index.ts new file mode 100644 index 0000000..a143001 --- /dev/null +++ b/src/widgets/header/index.ts @@ -0,0 +1,3 @@ +import { Header } from "./header"; + +export { Header }; diff --git a/src/widgets/section/index.ts b/src/widgets/section/index.ts new file mode 100644 index 0000000..3c74b69 --- /dev/null +++ b/src/widgets/section/index.ts @@ -0,0 +1,3 @@ +import { Section } from "./section"; + +export { Section }; diff --git a/src/widgets/section/section.tsx b/src/widgets/section/section.tsx new file mode 100644 index 0000000..14a7221 --- /dev/null +++ b/src/widgets/section/section.tsx @@ -0,0 +1,15 @@ +export const Section = ({ + name, + children, +}: { + name: string; + children: React.ReactNode; +}) => { + return ( + // open section onClick +
+

{name}

+
{children}
+
+ ); +}; diff --git a/tailwind.config.ts b/tailwind.config.ts index e9a0944..150e118 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -5,6 +5,7 @@ const config: Config = { "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", + "./src/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { @@ -13,6 +14,14 @@ const config: Config = { "gradient-conic": "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: [],