'fix' hydration error by rendering on the client

src/components/mode-toggle.tsx

@@ -17,6 +17,17 @@ type ThemeIconProps = {
 }
 
 const ThemeIcon = ({ theme }: ThemeIconProps) => {
+
+  const [mounted, setMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return null
+  }
+
   switch (theme) {
     case "light":
       return (
@@ -28,7 +39,7 @@ const ThemeIcon = ({ theme }: ThemeIconProps) => {
       )
     case "system":
       return (
-        <Monitor className="absolute h-[1.2rem] w-[1.2rem] scale-100 transition-all" />
+        <Monitor className="absolute h-[1.2rem] w-[1.2rem] scale-100" />
       )
     default:
       return (<>