"use client";
import "beercss";
import "material-dynamic-colors";
import { NavigationRail } from "@/app/components/NavigationRail/NavigationRail";
import { useEffect, useState } from "react";
import { ColorPicker } from "@/app/components/ColorPicker/ColorPicker";
import { useUserStore } from "./store/user-store";
import Settings from "./components/Settings/Settings";
function setMode(mode) {
localStorage.setItem("mode", mode);
}
function getMode() {
return localStorage.getItem("mode");
}
function setTheme(theme) {
localStorage.setItem("theme", theme);
}
function getTheme() {
return localStorage.getItem("theme");
}
export const App = (props) => {
const [colorPicker, setColorPicker] = useState(false);
const [settingsPopup, setSettingsPopup] = useState(false);
const userStore = useUserStore();
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(() => {
const mode = getMode();
const theme = getTheme();
if (mode != ui("mode")) {
ui("mode", getMode());
}
if (theme != ui("theme")) {
ui("theme", theme);
}
}, []);
useEffect(() => {
userStore.checkAuth();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<body>
<div style={{ display: "flex", flexDirection: "row" }}>
<div style={{ paddingInlineStart: "0" }}>
<NavigationRail
colorPicker={colorPicker}
settingsPopup={settingsPopup}
setColorPicker={setColorPicker}
setSettingsPopup={setSettingsPopup}
/>
{colorPicker && (
<ColorPicker
mode={mode}
theme={theme}
colorPicker={colorPicker}
setColorPicker={setColorPicker}
/>
)}
{settingsPopup && (
<Settings
settingsPopup={settingsPopup}
setSettingsPopup={setSettingsPopup}
/>
)}
</div>
<main
className="max padding"
style={{
height: "calc(100vh - 2rem)",
width: "100%",
overflow: "hidden",
}}
>
<div
className="border round padding"
style={{ height: "calc(100vh - 2rem)", overflowY: "scroll" }}
>
{props.children}
</div>
</main>
</div>
</body>
);
};