feat: Added hotkey shortcut to change themes

app/page.tsx

@@ -9,6 +9,7 @@ import { Header } from "@/components/home/header";
 import { Hero } from "@/components/home/hero";
 import { HowItWorks } from "@/components/home/how-it-works";
 import { Roadmap } from "@/components/home/roadmap";
+import { ThemeHotKeyHandler } from "@/components/home/theme-hotkey-handler";
 import { ThemePresetSelector } from "@/components/home/theme-preset-selector";
 import { useEffect, useState } from "react";
 
@@ -18,7 +19,7 @@ export default function Home() {
 
   useEffect(() => {
     const handleScroll = () => {
-      if (window.scrollY > 10) {
+      if (window.scrollY > 10){
         setIsScrolled(true);
       } else {
         setIsScrolled(false);
@@ -31,6 +32,7 @@ export default function Home() {
 
   return (
     <div className="bg-background text-foreground flex min-h-[100dvh] flex-col items-center justify-items-center">
+      <ThemeHotKeyHandler>
       <Header
         isScrolled={isScrolled}
         mobileMenuOpen={mobileMenuOpen}
@@ -47,6 +49,7 @@ export default function Home() {
         <CTA />
       </main>
       <Footer />
+      </ThemeHotKeyHandler>
     </div>
   );
 }

components/home/theme-hotkey-handler.tsx

@@ -0,0 +1,60 @@
+"use client"
+import { useClient } from "@/hooks/use-client"
+import { useEditorStore } from "@/store/editor-store"
+import { defaultPresets } from "@/utils/theme-presets"
+import { useEffect } from "react"
+
+
+export const ThemeHotKeyHandler = ({children}:{children:React.ReactNode}) => {
+
+    const { themeState, applyThemePreset } = useEditorStore()
+
+      const availableThemes = Object.keys(defaultPresets)
+      const isClient = useClient()
+
+      const applyRandomTheme = () => {
+
+        if(!isClient) return;
+
+        const currentTheme = themeState.preset
+        const otherThemes = availableThemes.filter(theme => theme != currentTheme)
+
+        if(otherThemes.length > 0){
+          const randomIndex = Math.floor(Math.random()* otherThemes.length)
+          const randomTheme = otherThemes[randomIndex]
+          applyThemePreset(randomTheme)
+        }
+      }
+
+      useEffect(() => {
+
+          if(!isClient) return;
+
+          const handleKeySpaceStroke = (event: KeyboardEvent) => {
+            if(!event.target || !(event.target instanceof HTMLElement)) return;
+
+            if(event.code === "Space" && 
+              event.target.tagName !== "INPUT" &&
+              event.target.tagName !== "TEXTAREA" &&
+               !event.target.isContentEditable &&
+                !event.target.closest('[contenteditable="true"]')) {
+
+              event.preventDefault(); 
+              applyRandomTheme();
+            }
+          };
+
+          window.addEventListener('keydown', handleKeySpaceStroke);
+
+
+          return () => {
+            window.removeEventListener('keydown', handleKeySpaceStroke);
+          };
+        }, [isClient, themeState.preset, availableThemes]);
+
+    return (
+        <div>
+            {children}
+        </div>
+    )
+}

hooks/use-client.ts

@@ -0,0 +1,15 @@
+"use client"
+
+import { useEffect, useState } from "react";
+
+export function useClient(){
+
+    const [isClient,setIsClinet] = useState(false)
+
+    useEffect(() => {
+
+        setIsClinet(true)
+    },[])
+
+    return isClient;
+}