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>
+	);
+}