Add header and themes

2026-04-03 20:30:48 +04:00 · 2024-05-08 22:50:44 +04:00
parent 9a3d900d1b
commit a634c194fe
19 changed files with 255 additions and 44 deletions
--- a/lint-staged.config.js
+++ b/lint-staged.config.js
@@ -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(" ")}`,
-};
--- 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",
--- 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"
  }
 }
--- 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);
 }
--- 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 (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
+    // suppressHydrationWarning only for html for theme support
+    <html lang="ru" suppressHydrationWarning>
+      <body className={inter.className}>
+        <ThemeProvider enableSystem={false} defaultTheme="light">
+          <Header />
+          {children}
+        </ThemeProvider>
+      </body>
    </html>
  );
 }
--- 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 (
+    <div className="w-full max-w-[var(--app-width)] m-auto">
+      <Section name="Игры">a</Section>
+    </div>
+  );
 }
--- a/src/features/gameCard/gameCard.tsx
+++ b/src/features/gameCard/gameCard.tsx
@@ -0,0 +1,3 @@
+export const GameCard = () => {
+  return <></>;
+};
--- a/src/features/gameCard/index.ts
+++ b/src/features/gameCard/index.ts
@@ -0,0 +1,3 @@
+import { GameCard } from "./gameCard";
+
+export { GameCard };
--- a/src/features/schemeSwitch/index.ts
+++ b/src/features/schemeSwitch/index.ts
@@ -0,0 +1,3 @@
+import { SchemeSwitch } from "./schemeSwitch";
+
+export { SchemeSwitch };
--- a/src/features/schemeSwitch/schemeSwitch.tsx
+++ 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 (
+    <>
+      <SunIcon
+        className="mr-5 h-8 w-8 cursor-pointer"
+        onClick={() => setTheme(theme == "light" ? "dark" : "light")}
+      />
+    </>
+  );
+};
--- a/src/shared/assets/icons/index.ts
+++ 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 };
--- a/src/shared/assets/icons/personIcon.tsx
+++ b/src/shared/assets/icons/personIcon.tsx
@@ -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>
+  );
+};
--- a/src/shared/assets/icons/searchIcon.tsx
+++ b/src/shared/assets/icons/searchIcon.tsx
@@ -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>
+  );
+};
--- a/src/shared/assets/icons/sunIcon.tsx
+++ b/src/shared/assets/icons/sunIcon.tsx
@@ -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>
+  );
+};
--- a/src/widgets/header/header.tsx
+++ 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 (
+    <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>
+  );
+};
--- a/src/widgets/header/index.ts
+++ b/src/widgets/header/index.ts
@@ -0,0 +1,3 @@
+import { Header } from "./header";
+
+export { Header };
--- a/src/widgets/section/index.ts
+++ b/src/widgets/section/index.ts
@@ -0,0 +1,3 @@
+import { Section } from "./section";
+
+export { Section };
--- a/src/widgets/section/section.tsx
+++ b/src/widgets/section/section.tsx
@@ -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>
+  );
+};
--- 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: [],