feat: first commit

src/components/ThemeToggle.tsx

@@ -0,0 +1,26 @@
+import { motion } from "framer-motion";
+import { useTheme } from "../context/ThemeContext";
+
+export function ThemeToggle() {
+  const { theme, toggle } = useTheme();
+  const dark = theme === "dark";
+
+  return (
+    <motion.button
+      onClick={toggle}
+      whileTap={{ scale: 0.9 }}
+      aria-label={dark ? "Switch to light mode" : "Switch to dark mode"}
+      className="focusable relative grid h-10 w-10 place-items-center overflow-hidden rounded-xl border-[1.5px] border-line bg-surface"
+    >
+      <motion.span
+        key={theme}
+        initial={{ y: 18, rotate: -90, opacity: 0, scale: 0.5 }}
+        animate={{ y: 0, rotate: 0, opacity: 1, scale: 1 }}
+        transition={{ type: "spring", stiffness: 500, damping: 14 }}
+        className="text-[17px]"
+      >
+        {dark ? "🌙" : "☀️"}
+      </motion.span>
+    </motion.button>
+  );
+}