p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: apply Popover in MainLayout for theme configure

Browse Source
This commit is contained in:
p-sw 2024-06-01 08:55:12 +09:00
parent b2cd9ba866
commit 39adc916d4
1 changed files with 66 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
packages/react/src/MainLayout.tsx
View File

@ -1,51 +1,78 @@
import { useState } from "react"; import { useEffect, useState } from "react";
import { Link, Outlet, useLocation } from "react-router-dom"; import { Link, Outlet, useLocation } from "react-router-dom";
import { Button } from "../components/Button"; import { Button } from "../components/Button";
import RouteObject from "./RouteObject"; import RouteObject from "./RouteObject";
import { Toaster } from "@components/Toast"; import { Toaster } from "@components/Toast";
import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
type Theme = "light" | "dark"; type Theme = "light" | "dark" | "system";
function ThemeButton() { function ThemeButton() {
const [theme, _setTheme] = useState<Theme>("light"); const [theme, setTheme] = useState<Theme>(
function setTheme(t: Theme) { (localStorage.getItem("theme") as Theme) || "system"
_setTheme(t); );
document.documentElement.classList.toggle("dark", t === "dark"); useEffect(() => {
} document.documentElement.classList.toggle("dark", theme === "dark");
document.documentElement.classList.toggle("system", theme === "system");
localStorage.setItem("theme", theme);
}, [theme]);
return ( return (
<Button <Popover>
preset="ghost" <PopoverTrigger>
size="icon" <Button preset="ghost" size="icon">
onClick={() => setTheme(theme === "light" ? "dark" : "light")} {/* material-symbols:light-mode */}
> <svg
{/* material-symbols:light-mode */} xmlns="http://www.w3.org/2000/svg"
<svg width="1.2em"
xmlns="http://www.w3.org/2000/svg" height="1.2em"
width="1.2em" viewBox="0 0 24 24"
height="1.2em" className="dark:hidden"
viewBox="0 0 24 24" >
className="dark:hidden" <path
> fill="currentColor"
<path d="M12 17q-2.075 0-3.537-1.463T7 12t1.463-3.537T12 7t3.538 1.463T17 12t-1.463 3.538T12 17m-7-4H1v-2h4zm18 0h-4v-2h4zM11 5V1h2v4zm0 18v-4h2v4zM6.4 7.75L3.875 5.325L5.3 3.85l2.4 2.5zm12.3 12.4l-2.425-2.525L17.6 16.25l2.525 2.425zM16.25 6.4l2.425-2.525L20.15 5.3l-2.5 2.4zM3.85 18.7l2.525-2.425L7.75 17.6l-2.425 2.525z"
fill="currentColor" />
d="M12 17q-2.075 0-3.537-1.463T7 12t1.463-3.537T12 7t3.538 1.463T17 12t-1.463 3.538T12 17m-7-4H1v-2h4zm18 0h-4v-2h4zM11 5V1h2v4zm0 18v-4h2v4zM6.4 7.75L3.875 5.325L5.3 3.85l2.4 2.5zm12.3 12.4l-2.425-2.525L17.6 16.25l2.525 2.425zM16.25 6.4l2.425-2.525L20.15 5.3l-2.5 2.4zM3.85 18.7l2.525-2.425L7.75 17.6l-2.425 2.525z" </svg>
/> {/* material-symbols:dark-mode */}
</svg> <svg
{/* material-symbols:dark-mode */} xmlns="http://www.w3.org/2000/svg"
<svg width="1.2em"
xmlns="http://www.w3.org/2000/svg" height="1.2em"
width="1.2em" viewBox="0 0 24 24"
height="1.2em" className="hidden dark:block"
viewBox="0 0 24 24" >
className="hidden dark:block" <path
> fill="currentColor"
<path d="M12 21q-3.75 0-6.375-2.625T3 12t2.625-6.375T12 3q.35 0 .688.025t.662.075q-1.025.725-1.638 1.888T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q1.375 0 2.525-.613T20.9 10.65q.05.325.075.662T21 12q0 3.75-2.625 6.375T12 21"
fill="currentColor" />
d="M12 21q-3.75 0-6.375-2.625T3 12t2.625-6.375T12 3q.35 0 .688.025t.662.075q-1.025.725-1.638 1.888T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q1.375 0 2.525-.613T20.9 10.65q.05.325.075.662T21 12q0 3.75-2.625 6.375T12 21" </svg>
/> </Button>
</svg> </PopoverTrigger>
</Button> <PopoverContent anchor="bottomLeft" className="w-32">
<Button
preset="ghost"
onClick={() => setTheme("light")}
className="w-full px-2 py-1.5 text-sm"
>
Light
</Button>
<Button
preset="ghost"
onClick={() => setTheme("dark")}
className="w-full px-2 py-1.5 text-sm"
>
Dark
</Button>
<Button
preset="ghost"
onClick={() => setTheme("system")}
className="w-full px-2 py-1.5 text-sm"
>
System
</Button>
</PopoverContent>
</Popover>
); );
} }