From e3cb081606f4536324deacdb51f59c961d768de0 Mon Sep 17 00:00:00 2001
From: igalklebanov <igalklebanov@gmail.com>
Date: Sun, 13 Oct 2024 01:12:06 +0300
Subject: [PATCH] .,.

---
 site/src/components/Playground.tsx | 14 +++++++++-----
 site/src/hooks/use-color-mode.ts   |  7 -------
 2 files changed, 9 insertions(+), 12 deletions(-)
 delete mode 100644 site/src/hooks/use-color-mode.ts

diff --git a/site/src/components/Playground.tsx b/site/src/components/Playground.tsx
index cfbe2d426..42f57727a 100644
--- a/site/src/components/Playground.tsx
+++ b/site/src/components/Playground.tsx
@@ -1,17 +1,21 @@
-import { useRef } from 'react'
-import { useColorMode } from '../hooks/use-color-mode'
+import { useColorMode } from '@docusaurus/theme-common'
+import { useEffect, useState } from 'react'
 import styles from './Playground.module.css'
 
 export function Playground(props: PlaygroundProps) {
-  const playgroundRef = useRef(null)
   const params = usePlaygroundParams(props.disableIframeMode)
+  const [src, setSrc] = useState('')
+
+  useEffect(() => {
+    setSrc(`https://kyse.link/?${params}${getPlaygroundStateHash(props)}`)
+  }, [])
 
   return (
     <iframe
       allow="clipboard-write"
+      autoFocus
       className={styles.playground}
-      ref={playgroundRef}
-      src={`https://kyse.link/?${params}${getPlaygroundStateHash(props)}`}
+      src={src}
     />
   )
 }
diff --git a/site/src/hooks/use-color-mode.ts b/site/src/hooks/use-color-mode.ts
deleted file mode 100644
index 2471d16d6..000000000
--- a/site/src/hooks/use-color-mode.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { useColorMode as useColorModeNative } from '@docusaurus/theme-common'
-
-export function useColorMode() {
-  const { colorMode } = useColorModeNative()
-
-  return { colorMode }
-}