Most simple components created

lib/component/nav/DarkModeSwitch.tsx

@@ -0,0 +1,46 @@
+import { useTheme } from "$/providers/theme/ThemeProvider";
+import { BsLightbulb, BsLightbulbFill } from "react-icons/bs";
+
+
+export default function DarkModeSwitch(){
+	const { theme, setTheme } = useTheme();
+
+
+	const updateTheme = () => {
+		if(theme === "system"){
+			if(window.document.documentElement.classList.contains("dark")){
+				setTheme("light");
+			}
+			else{
+				setTheme("dark");
+			}
+		}
+		else{
+			setTheme(theme === "dark" ? "light" : "dark");
+		}
+	}
+
+
+	return (
+		<label
+			className="flex flex-row justify-center items-center cursor-pointer"
+		>
+			<input
+				type="checkbox"
+				className="peer hidden"
+				checked={theme === "dark"}
+				onChange={updateTheme}
+			/>
+			<div
+				className="block peer-checked:hidden cursor-pointer"
+			>
+				<BsLightbulbFill/>
+			</div>
+			<div
+				className="hidden peer-checked:block cursor-pointer"
+			>
+				<BsLightbulb/>
+			</div>
+		</label>
+	);
+}

lib/component/nav/NavBar.tsx

@@ -0,0 +1,23 @@
+import type { NavBarProps } from "$/types/Nav";
+import clsx from "clsx";
+
+
+export default function NavBar(props: NavBarProps){
+	const {
+		className,
+		children
+	} = props;
+
+
+	return (
+		<nav
+			className={clsx(
+				className,
+				"fixed top-0 left-0 w-full z-10",
+				"flex flex-row flex-nowrap items-center justify-between"
+			)}
+		>
+			{children}
+		</nav>
+	);
+}

lib/component/nav/PopoverMenu.tsx

@@ -0,0 +1,35 @@
+import type { PopoverMenuProps } from "$/types/Nav";
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
+import clsx from "clsx";
+import { RiArrowRightSLine } from "react-icons/ri";
+
+export default function PopoverMenu(props: PopoverMenuProps){
+	const {
+		buttonContent,
+		anchor,
+		children
+	} = props;
+
+
+	return (
+		<Popover>
+			<PopoverButton
+				className={clsx(
+					"flex flex-row flex-nowrap items-center justify-center",
+					"cursor-pointer outline-none h-full"
+				)}
+			>
+				{buttonContent} <RiArrowRightSLine strokeWidth={2} size={24}/>
+			</PopoverButton>
+			<PopoverPanel
+				anchor={{to: anchor}}
+				className={clsx(
+					"flex flex-col items-start justify-center",
+					"bg-(--bg-color) border border-neutral-400 outline-none mt-3"
+				)}
+			>
+				{children}
+			</PopoverPanel>
+		</Popover>
+	);
+}