migrated to react

frontend/src/layouts/Layout.astro

@@ -1,6 +1,6 @@
 ---
 import '../styles/global.css';
-import ThemeSwitcher from '../components/ThemeSwitcher.astro';
+import ThemeSwitcher from '../components/react/ThemeSwitcher';
 
 interface Props {
 	title: string;
@@ -40,8 +40,6 @@ try {
 		<title>{title} | {siteConfig.title}</title>
         {siteConfig.custom_css && <style set:html={siteConfig.custom_css} />}
         <script is:inline define:vars={{ defaultTheme: siteConfig.theme }}>
-            // Prevention of FOUC (Flash of Unstyled Content)
-            // Immediately apply theme before rendering
             const savedTheme = localStorage.getItem('user-theme') || defaultTheme;
             document.documentElement.className = savedTheme;
         </script>
@@ -53,7 +51,7 @@ try {
             <div class="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] rounded-full bg-blue/15 blur-[120px] opacity-60 animate-pulse" style="animation-duration: 15s;"></div>
             <div class="absolute top-[30%] right-[10%] w-[40%] h-[40%] rounded-full bg-teal/10 blur-[100px] opacity-50 animate-pulse" style="animation-duration: 12s;"></div>
         </div>
-		
+
         <nav class="max-w-6xl mx-auto px-4 md:px-6 py-4 md:py-8">
             <header class="glass px-4 py-3 md:px-6 md:py-4 flex flex-col md:flex-row items-center justify-between gap-4">
                 <div class="w-full md:w-auto text-center md:text-left">
@@ -65,7 +63,7 @@ try {
                 <div class="flex gap-3 md:gap-4 items-center text-sm md:text-base w-full md:w-auto justify-center md:justify-end">
                     <a href="/" class="text-subtext0 hover:text-text transition-colors">Home</a>
                     <a href="/admin" class="text-subtext0 hover:text-mauve transition-colors">Admin</a>
-                    <ThemeSwitcher defaultTheme={siteConfig.theme} />
+                    <ThemeSwitcher client:load defaultTheme={siteConfig.theme} />
                 </div>
             </header>
         </nav>