initial commit after project creation

src/components/ui/light-dark-switch.tsx

@@ -0,0 +1,37 @@
+"use client";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { IoMoon, IoSunny } from "react-icons/io5";
+
+export default function LightDarkSwitch() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  const isLight = resolvedTheme === "light";
+
+  return (
+    <button
+      type="button"
+      className="flex items-center justify-center w-10 h-10 rounded-full transition-all duration-300 ease-in-out cursor-pointer"
+      onClick={() => setTheme(isLight ? "dark" : "light")}
+    >
+      {mounted ? (
+        isLight ? (
+          <IoSunny
+            size={20}
+            className="text-brand-primary transition-colors duration-300"
+          />
+        ) : (
+          <IoMoon
+            size={19}
+            className="text-neutral-text transition-colors duration-300"
+          />
+        )
+      ) : (
+        <div className="w-5 h-5 rounded-full animate-pulse opacity-20" />
+      )}
+    </button>
+  );
+}