Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-06 00:04:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

frontend: add close button to color picker

Browse source
This commit is contained in:
Kentai Radiquum 2024-04-21 05:49:46 +05:00
parent 79782b4228
commit 6b88601417
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
2 changed files with 38 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
frontend/app/App.jsx
View file

@ -34,14 +34,21 @@ export const App = (props) => {
return ( return (
<body> <body>
<NavigationRail <div>
colorPicker={colorPicker} <NavigationRail
setColorPicker={setColorPicker} colorPicker={colorPicker}
/> setColorPicker={setColorPicker}
<main className="responsive"> />
{colorPicker && <ColorPicker mode={mode} theme={theme} />} {colorPicker && (
{props.children} <ColorPicker
</main> mode={mode}
theme={theme}
colorPicker={colorPicker}
setColorPicker={setColorPicker}
/>
)}
</div>
<main className="responsive">{props.children}</main>
</body> </body>
); );
}; };

37
frontend/app/components/ColorPicker/ColorPicker.jsx
View file

@ -1,7 +1,7 @@
"use client"; "use client";
import { useState } from "react"; import { useState } from "react";
import Styles from "./ColorPicker.module.css" import Styles from "./ColorPicker.module.css";
export const ColorPicker = (props) => { export const ColorPicker = (props) => {
const colors = [ const colors = [
@ -13,15 +13,15 @@ export const ColorPicker = (props) => {
{ hex: "#9c27b0", color: "purple" }, { hex: "#9c27b0", color: "purple" },
{ hex: "#673ab7", color: "deep-purple" }, { hex: "#673ab7", color: "deep-purple" },
{ hex: "#ffeb3b", color: "yellow" }, { hex: "#ffeb3b", color: "yellow" },
{ hex: "#ffc8ff", color: Styles["radiquum-pink"]}, { hex: "#ffc8ff", color: Styles["radiquum-pink"] },
{ hex: "#0087c7", color: Styles["fuxigen-blue"]}, { hex: "#0087c7", color: Styles["fuxigen-blue"] },
{ hex: "#e54040", color: Styles["anixart-red"]}, { hex: "#e54040", color: Styles["anixart-red"] },
]; ];
const [mode, setMode] = useState(ui("mode")); const [mode, setMode] = useState(ui("mode"));
return ( return (
<dialog className="active"> <dialog className="active">
<h5>Theme Select</h5> <h5>Выбор темы</h5>
<div className="grid center-align"> <div className="grid center-align">
{colors.map((item) => { {colors.map((item) => {
return ( return (
@ -34,15 +34,24 @@ export const ColorPicker = (props) => {
})} })}
</div> </div>
<div className="medium-divider"></div> <div className="medium-divider"></div>
<button <nav>
className={`circle small transparent`} <button
onClick={() => { className={`circle small transparent`}
props.mode(); onClick={() => {
setMode(ui("mode")); props.mode();
}} setMode(ui("mode"));
> }}
{mode == "light" ? <i>dark_mode</i> : <i>light_mode</i>} >
</button> {mode == "light" ? <i>dark_mode</i> : <i>light_mode</i>}
</button>
<span className="max"></span>
<button
className={`circle small transparent `}
onClick={() => props.setColorPicker(!props.colorPicker)}
>
<i>close</i>
</button>
</nav>
</dialog> </dialog>
); );
}; };