diff --git a/frontend/app/App.jsx b/frontend/app/App.jsx index 4683b99..8d4a3da 100644 --- a/frontend/app/App.jsx +++ b/frontend/app/App.jsx @@ -1,21 +1,47 @@ "use client"; +import "beercss"; +import "material-dynamic-colors"; import { NavigationRail } from "@/app/components/NavigationRail/NavigationRail"; -import { useThemeStore } from "./store/theme-store"; -import { useEffect } from "react"; -// import { useStore } from "./store/app-store"; +import { setTheme, getTheme, setMode, getMode } from "./store/theme-store"; +import { useEffect, useState } from "react"; +import { ColorPicker } from "@/app/components/ColorPicker/ColorPicker"; export const App = (props) => { - const themeStore = useThemeStore(); + const [colorPicker, setColorPicker] = useState(false); + + const theme = async (from) => { + setTheme(from); + await ui("theme", from); + }; + + const mode = () => { + let newMode = ui("mode") == "dark" ? "light" : "dark"; + setMode(newMode); + ui("mode", getMode()); + }; useEffect(() => { - themeStore.checkTheme(); + const mode = getMode(); + const theme = getTheme(); + if (mode != ui("mode")) { + ui("mode", getMode()); + } + if (theme != ui("theme")) { + ui("theme", theme); + } }, []); return ( - - -
{props.children}
+ + +
+ {colorPicker && } + {props.children} +
); }; diff --git a/frontend/app/components/ColorPicker/ColorPicker.jsx b/frontend/app/components/ColorPicker/ColorPicker.jsx new file mode 100644 index 0000000..d8827d8 --- /dev/null +++ b/frontend/app/components/ColorPicker/ColorPicker.jsx @@ -0,0 +1,48 @@ +"use client"; + +import { useState } from "react"; +import Styles from "./ColorPicker.module.css" + +export const ColorPicker = (props) => { + const colors = [ + { hex: "#ffffff", color: "white" }, + { hex: "#e91e63", color: "pink" }, + { hex: "#ff9800", color: "orange" }, + { hex: "#4caf50", color: "green" }, + { hex: "#009688", color: "teal" }, + { hex: "#9c27b0", color: "purple" }, + { hex: "#673ab7", color: "deep-purple" }, + { hex: "#ffeb3b", color: "yellow" }, + { hex: "#ffc8ff", color: Styles["radiquum-pink"]}, + { hex: "#0087c7", color: Styles["fuxigen-blue"]}, + { hex: "#e54040", color: Styles["anixart-red"]}, + ]; + const [mode, setMode] = useState(ui("mode")); + + return ( + +
Theme Select
+
+ {colors.map((item) => { + return ( + + ); + })} +
+
+ + + ); +}; diff --git a/frontend/app/components/ColorPicker/ColorPicker.module.css b/frontend/app/components/ColorPicker/ColorPicker.module.css new file mode 100644 index 0000000..f1afadf --- /dev/null +++ b/frontend/app/components/ColorPicker/ColorPicker.module.css @@ -0,0 +1,9 @@ +.radiquum-pink{ + background-color: #ffc8ff !important; +} +.fuxigen-blue{ + background-color: #0087c7 !important; +} +.anixart-red{ + background-color: #e54040 !important; +} \ No newline at end of file diff --git a/frontend/app/components/NavigationRail/NavigationRail.jsx b/frontend/app/components/NavigationRail/NavigationRail.jsx index 269f66d..1cdd9e4 100644 --- a/frontend/app/components/NavigationRail/NavigationRail.jsx +++ b/frontend/app/components/NavigationRail/NavigationRail.jsx @@ -1,12 +1,38 @@ "use client"; import { usePathname } from "next/navigation"; -import { useThemeStore } from "@/app/store/theme-store"; import Link from "next/link"; -export const NavigationRail = () => { +export const NavigationRail = (props) => { const pathname = usePathname(); - const themeStore = useThemeStore(); + + const items = [ + { + title: "Домашняя", + icon: "home", + path: "/", + }, + { + title: "Поиск", + icon: "search", + path: "/search", + }, + { + title: "Закладки", + icon: "bookmark", + path: "/bookmarks", + }, + { + title: "Избранное", + icon: "favorite", + path: "/favorites", + }, + { + title: "История", + icon: "history", + path: "/history", + }, + ]; return ( ); }; diff --git a/frontend/app/globals.css b/frontend/app/globals.css index deea98c..f55e9e5 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -21,81 +21,3 @@ body, nav.left{ transition: background .2s; transform-origin: left; } - -body.light.light { - --primary: #bc004b; - --on-primary: #ffffff; - --primary-container: #ffd9de; - --on-primary-container: #400014; - --secondary: #75565b; - --on-secondary: #ffffff; - --secondary-container: #ffd9de; - --on-secondary-container: #2c1519; - --tertiary: #795831; - --on-tertiary: #ffffff; - --tertiary-container: #ffddba; - --on-tertiary-container: #2b1700; - --error: #ba1a1a; - --on-error: #ffffff; - --error-container: #ffdad6; - --on-error-container: #410002; - --background: #fffbff; - --on-background: #201a1b; - --surface: #fff8f7; - --on-surface: #201a1b; - --surface-variant: #f3dddf; - --on-surface-variant: #524345; - --outline: #847375; - --outline-variant: #d6c2c3; - --shadow: #000000; - --scrim: #000000; - --inverse-surface: #362f2f; - --inverse-on-surface: #fbeeee; - --inverse-primary: #ffb2be; - --surface-dim: #e3d7d8; - --surface-bright: #fff8f7; - --surface-container-lowest: #ffffff; - --surface-container-low: #fdf1f1; - --surface-container: #f8ebeb; - --surface-container-high: #f2e5e6; - --surface-container-highest: #ece0e0; -} - -body.dark.dark { - --primary: #ffb2be; - --on-primary: #660025; - --primary-container: #900038; - --on-primary-container: #ffd9de; - --secondary: #e5bdc2; - --on-secondary: #43292d; - --secondary-container: #5c3f43; - --on-secondary-container: #ffd9de; - --tertiary: #ebbf90; - --on-tertiary: #452b08; - --tertiary-container: #5f411c; - --on-tertiary-container: #ffddba; - --error: #ffb4ab; - --on-error: #690005; - --error-container: #93000a; - --on-error-container: #ffb4ab; - --background: #201a1b; - --on-background: #ece0e0; - --surface: #181213; - --on-surface: #ece0e0; - --surface-variant: #524345; - --on-surface-variant: #d6c2c3; - --outline: #9f8c8e; - --outline-variant: #524345; - --shadow: #000000; - --scrim: #000000; - --inverse-surface: #ece0e0; - --inverse-on-surface: #362f2f; - --inverse-primary: #bc004b; - --surface-dim: #181213; - --surface-bright: #3f3738; - --surface-container-lowest: #120d0d; - --surface-container-low: #201a1b; - --surface-container: #241e1f; - --surface-container-high: #2f2829; - --surface-container-highest: #3a3334; -} \ No newline at end of file diff --git a/frontend/app/layout.js b/frontend/app/layout.js index bf915f1..e615634 100644 --- a/frontend/app/layout.js +++ b/frontend/app/layout.js @@ -1,5 +1,4 @@ import "./globals.css"; -import "beercss"; import {App} from "@/app/App" export const metadata = { diff --git a/frontend/app/page.js b/frontend/app/page.js index dccd559..de48d18 100644 --- a/frontend/app/page.js +++ b/frontend/app/page.js @@ -28,7 +28,12 @@ export default function Home() { // set list on initial page load useEffect(() => { - setList(searchParams.get("list") || "last"); + const query = searchParams.get("list"); + if (query) { + setList(query); + } else { + setList("last"); + } }, []); async function fetchData(list, page = 0) { @@ -44,10 +49,12 @@ export default function Home() { } useEffect(() => { - router.push(pathname + "?" + createQueryString("list", list)); - setReleases(null); - setPage(0); - fetchData(list); // Call fetchData here + if (list) { + router.push(pathname + "?" + createQueryString("list", list)); + setReleases(null); + setPage(0); + fetchData(list); // Call fetchData here + } }, [list]); useEffect(() => { @@ -81,6 +88,7 @@ export default function Home() { {chips.map((item) => { return (