diff --git a/package-lock.json b/package-lock.json index 63e1cfc..0e39b7e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "torrent_frontend", "version": "0.1.0", "dependencies": { + "clsx": "^2.1.1", "next": "14.2.3", "next-themes": "^0.3.0", "react": "^18", @@ -1088,6 +1089,14 @@ "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", diff --git a/package.json b/package.json index 87c2704..a8f70ff 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "clsx": "^2.1.1", "next": "14.2.3", "next-themes": "^0.3.0", "react": "^18", diff --git a/src/app/globals.css b/src/app/globals.css index c3a2e24..1b0b5a5 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -41,3 +41,15 @@ body { color: var(--color-fg1); background-color: var(--color-bg0); } + +@media (max-width: 1280px) { + :root { + --app-width: 100%; + } +} + +@media (max-width: 640px) { + :root { + font-size: calc((100vh / 1080) * 16); + } +} \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 74f814a..3ee6344 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,9 +1,6 @@ +import { GameCard } from "@/features/gameCard"; import { Section } from "@/widgets/section"; export default function Home() { - return ( -
-
a
-
- ); + return
; } diff --git a/src/features/colorSchemeSwitch/colorSchemeSwitch.tsx b/src/features/colorSchemeSwitch/colorSchemeSwitch.tsx new file mode 100644 index 0000000..fd7291f --- /dev/null +++ b/src/features/colorSchemeSwitch/colorSchemeSwitch.tsx @@ -0,0 +1,17 @@ +"use client"; + +import { SunIcon } from "@/shared/assets/icons"; +import { useTheme } from "next-themes"; + +export const ColorSchemeSwitch = () => { + const { theme, setTheme } = useTheme(); + + return ( + <> + setTheme(theme == "light" ? "dark" : "light")} + /> + + ); +}; diff --git a/src/features/colorSchemeSwitch/index.ts b/src/features/colorSchemeSwitch/index.ts new file mode 100644 index 0000000..6238176 --- /dev/null +++ b/src/features/colorSchemeSwitch/index.ts @@ -0,0 +1,3 @@ +import { ColorSchemeSwitch } from "./colorSchemeSwitch"; + +export { ColorSchemeSwitch as SchemeSwitch }; diff --git a/src/features/gameCard/gameCard.tsx b/src/features/gameCard/gameCard.tsx index a7383a2..cf61e5f 100644 --- a/src/features/gameCard/gameCard.tsx +++ b/src/features/gameCard/gameCard.tsx @@ -1,3 +1,3 @@ export const GameCard = () => { - return <>; + return <>; }; diff --git a/src/features/schemeSwitch/index.ts b/src/features/schemeSwitch/index.ts deleted file mode 100644 index a04673c..0000000 --- a/src/features/schemeSwitch/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { SchemeSwitch } from "./schemeSwitch"; - -export { SchemeSwitch }; diff --git a/src/features/schemeSwitch/schemeSwitch.tsx b/src/features/schemeSwitch/schemeSwitch.tsx deleted file mode 100644 index 88fb430..0000000 --- a/src/features/schemeSwitch/schemeSwitch.tsx +++ /dev/null @@ -1,17 +0,0 @@ -"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/widgets/header/header.tsx b/src/widgets/header/header.tsx index b1c5bf9..ead011c 100644 --- a/src/widgets/header/header.tsx +++ b/src/widgets/header/header.tsx @@ -1,45 +1,62 @@ -import { SchemeSwitch } from "@/features/schemeSwitch"; +import { SchemeSwitch } from "@/features/colorSchemeSwitch"; import { PersonIcon, SearchIcon } from "@/shared/assets/icons"; +import { MobileMenu } from "./mobileMenu/mobileMenu"; +import Link from "next/link"; + +const sections = [ + { title: "Игры", href: "/games" }, + { title: "Фильмы", href: "/films" }, + { title: "Аудиокниги", href: "/audiobooks" }, +]; export const Header = () => { - return ( -
-
+
-

.Torrent

-
- {["Игры", "Фильмы", "Аудиокниги"].map((section) => ( - - {section} - - ))} -
-
- - - - - Войти - - - -
-
-
- ); + > +

+
+ +
+ .Torrent +

+
+ {sections.map((section) => ( + + {section.title} + + ))} +
+
+ + + + + Войти + + + +
+ + + ); }; diff --git a/src/widgets/header/mobileMenu/mobileMenu.tsx b/src/widgets/header/mobileMenu/mobileMenu.tsx new file mode 100644 index 0000000..cbea95e --- /dev/null +++ b/src/widgets/header/mobileMenu/mobileMenu.tsx @@ -0,0 +1,50 @@ +"use client"; + +import clsx from "clsx"; +import Link from "next/link"; +import { useState } from "react"; + +export const MobileMenu = ({ + sections, +}: { + sections: { title: string; href: string }[]; +}) => { + const [open, changeMenuOpen] = useState(false); + + return ( +
+ +
changeMenuOpen(false)} + > + {sections.map((section) => ( + + {section.title} + + ))} +
+
+ ); +}; diff --git a/src/widgets/section/section.tsx b/src/widgets/section/section.tsx index 14a7221..90d07b8 100644 --- a/src/widgets/section/section.tsx +++ b/src/widgets/section/section.tsx @@ -1,15 +1,15 @@ export const Section = ({ - name, - children, + name, + children, }: { - name: string; - children: React.ReactNode; + name: string; + children: React.ReactNode; }) => { - return ( - // open section onClick -
-

{name}

-
{children}
-
- ); + return ( + // open section onClick +
+

{name}

+
{children}
+
+ ); }; diff --git a/tailwind.config.ts b/tailwind.config.ts index 150e118..0227ec2 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,29 +1,34 @@ import type { Config } from "tailwindcss"; const config: Config = { - content: [ - "./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: { - backgroundImage: { - "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", - "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: [], + content: [ + "./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: { + backgroundImage: { + "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", + "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)", + }, + }, + screens: { + tb: "640px", + lp: "1024px", + dsk: "1280px", + }, + }, + plugins: [], }; export default config;