egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adjustible archive formats + finalized settings page

Browse Source
This commit is contained in:
daniel31x13
2023-10-19 00:00:23 -04:00
parent 19467f243f
commit ca3ce7e3de
9 changed files with 189 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/settings/appearance.tsx
+17 -14
View File
@@ -1,34 +1,37 @@
import SettingsLayout from "@/layouts/SettingsLayout";
import { useTheme } from "next-themes";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
export default function appearance() {
const { theme, setTheme } = useTheme();
const handleToggle = () => {
if (theme === "dark") {
setTheme("light");
} else {
setTheme("dark");
}
};
return (
<SettingsLayout>
<p className="mb-3 text-sm">Select Theme</p>
<div className="flex gap-3 w-full">
<div
className="w-full text-center border-solid border-sky-100 border dark:border-neutral-700 h-40 rounded-md flex items-center justify-center cursor-pointer select-none bg-black text-white"
className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
theme === "dark"
? "dark:outline-sky-500 text-sky-500"
: "text-white"
}`}
onClick={() => setTheme("dark")}
>
<p>Dark Theme</p>
<FontAwesomeIcon icon={faMoon} className="w-1/2 h-1/2" />
<p className="text-2xl">Dark Theme</p>
{/* <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" /> */}
{/* <hr className="my-3 outline-1 outline-sky-100 dark:outline-neutral-700" /> */}
</div>
<div
className="w-full text-center border-solid border-sky-100 border dark:border-neutral-700 h-40 rounded-md flex items-center justify-center cursor-pointer select-none bg-white text-black"
className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
theme === "light" ? "outline-sky-500 text-sky-500" : "text-black"
}`}
onClick={() => setTheme("light")}
>
<p>Light Theme</p>
{/* <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" /> */}
<FontAwesomeIcon icon={faSun} className="w-1/2 h-1/2" />
<p className="text-2xl">Light Theme</p>
{/* <hr className="my-3 outline-1 outline-sky-100 dark:outline-neutral-700" /> */}
</div>
</div>
</SettingsLayout>