fix: code organisation and rendering

src/components/Playground/Playground.tsx

@@ -1,76 +1,45 @@
 'use client';
 
 import Image from 'next/image';
-import { Dice1, Dice3, Dice5, Info } from 'lucide-react';
-
-// Components
-import Shell from '@/components/Shell/Shell';
 import SearchBox from '@/components/Search/SearchBox';
+import { TerminalUI } from './TerminalUI';
 
 // utils
-import { formatTime } from '@/shared/utils/commonUtils';
-import { usePlayground } from './hooks/usePlayground';
 
 export default function Playground() {
-  const { decreaseCommandsLeft, search, timeLeft, commandsLeft, setSearch } =
-    usePlayground();
-
   return (
     <div className="container mx-auto flex flex-col flex-grow min-h-screen bg-white text-gray-900">
-      <header className="navbar flex items-center justify-between py-5">
-        <div className="flex items-center">
-          <Image
-            src="/images/dicedb-logo-light.png"
-            width={110}
-            height={110}
-            priority={true}
-            alt="DiceDB logo"
-            className="object-contain"
-            unoptimized
-          />
-          <h2 className="font-light text-2xl ml-2">PlayGround</h2>
-        </div>
-      </header>
+      <Header />
 
       <main className="flex flex-col lg:flex-row gap-10 flex-grow overflow-hidden px-4">
         <div className="w-full lg:w-7/12 flex flex-col">
-          <div className="bg-gray-900 rounded-lg">
-            <div className="bg-gray-900 px-4 py-4 flex items-center rounded-lg">
-              <div className="flex space-x-2">
-                <Dice5 className="w-4 h-4 bg-red-500" />
-                <Dice1 className="w-4 h-4 bg-yellow-500" />
-                <Dice3 className="w-4 h-4 bg-green-500" />
-              </div>
-            </div>
-            <div className="h-64 md:h-[30rem] bg-gray-100 rounded-lg overflow-hidden shadow-md">
-              <Shell decreaseCommandsLeft={decreaseCommandsLeft} />
-            </div>
-          </div>
-
-          <div className="flex flex-col">
-            <div className="flex flex-row justify-between text-gray-900 mt-4">
-              <div className="flex justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg">
-                <span>Cleanup in : {formatTime(timeLeft)} mins</span>
-              </div>
-              <div className="flex justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg">
-                <span>Commands left: {commandsLeft}</span>
-              </div>
-            </div>
-            <div className="flex flex-row items-start mt-5">
-              <Info className="w-4 h-4 text-gray-500 mr-1" />
-              <p className="text-sm text-gray-500">
-                DiceDB instance is shared across all users.
-              </p>
-            </div>
-          </div>
+          <TerminalUI />
         </div>
-
         <div className="w-full lg:w-5/12 flex flex-col">
           <div className="flex-grow border border-gray-400 bg-gray-100 p-4 rounded-lg shadow-md mb-4">
-            <SearchBox search={search} setSearch={setSearch} />
+            <SearchBox />
           </div>
         </div>
       </main>
     </div>
   );
 }
+
+function Header() {
+  return (
+    <header className="navbar flex items-center justify-between py-5">
+      <div className="flex items-center">
+        <Image
+          src="/images/dicedb-logo-light.png"
+          width={110}
+          height={110}
+          priority={true}
+          alt="DiceDB logo"
+          className="object-contain"
+          unoptimized
+        />
+        <h2 className="font-light text-2xl ml-2">PlayGround</h2>
+      </div>
+    </header>
+  );
+}

src/components/Playground/TerminalUI.tsx

@@ -0,0 +1,51 @@
+import { Dice1, Dice3, Dice5, Info } from 'lucide-react';
+import Shell from '../Shell/Shell';
+import { formatTime } from '@/shared/utils/commonUtils';
+import { useTimer } from '@/shared/hooks/useTimer';
+import { useState } from 'react';
+
+export function TerminalUI() {
+  const [commandsLeft, setCommandsLeft] = useState(1000);
+  const decreaseCommandsLeft = () => {
+    setCommandsLeft((prev) => (prev > 0 ? prev - 1 : 0));
+  };
+  return (
+    <>
+      <div className="bg-gray-900 rounded-lg">
+        <div className="bg-gray-900 px-4 py-4 flex items-center rounded-lg">
+          <div className="flex space-x-2">
+            <Dice5 className="w-4 h-4 bg-red-500" />
+            <Dice1 className="w-4 h-4 bg-yellow-500" />
+            <Dice3 className="w-4 h-4 bg-green-500" />
+          </div>
+        </div>
+        <div className="h-64 md:h-[30rem] bg-gray-100 rounded-lg overflow-hidden shadow-md">
+          <Shell decreaseCommandsLeft={decreaseCommandsLeft} />
+        </div>
+      </div>
+      <TerminalCounter commandsLeft={commandsLeft} />
+    </>
+  );
+}
+
+function TerminalCounter({ commandsLeft }: { commandsLeft: number }) {
+  const { timeLeft } = useTimer(15 * 60);
+  return (
+    <div className="flex flex-col">
+      <div className="flex flex-row justify-between text-gray-900 mt-4">
+        <div className="flex justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg">
+          <span>Cleanup in : {formatTime(timeLeft)} mins</span>
+        </div>
+        <div className="flex justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg">
+          <span>Commands left: {commandsLeft}</span>
+        </div>
+      </div>
+      <div className="flex flex-row items-start mt-5">
+        <Info className="w-4 h-4 text-gray-500 mr-1" />
+        <p className="text-sm text-gray-500">
+          DiceDB instance is shared across all users.
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/Search/SearchBox.tsx

@@ -1,18 +1,18 @@
 'use client';
 
-import { SetStateAction, Dispatch } from 'react';
+import { useMemo, useState } from 'react';
 import { Search } from 'lucide-react';
 import { DiceCmds, DiceCmdMeta } from '@/data/command';
 import CommandPage from './command';
 
-interface SearchBoxProps {
-  search: string;
-  setSearch: Dispatch<SetStateAction<string>>;
-}
-
-export default function SearchBox({ search, setSearch }: SearchBoxProps) {
-  const filteredCommands = Object.values(DiceCmds).filter((cmd: DiceCmdMeta) =>
-    cmd.title.toLowerCase().includes(search.toLowerCase()),
+export default function SearchBox() {
+  const [search, setSearch] = useState('');
+  const filteredCommands = useMemo(
+    () =>
+      Object.values(DiceCmds).filter((cmd: DiceCmdMeta) =>
+        cmd.title.toLowerCase().includes(search.toLowerCase()),
+      ),
+    [search],
   );
 
   return (

src/components/Search/command.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Clipboard } from 'lucide-react';
 import { DiceCmdMeta } from '@/data/command';
 import { useState } from 'react';
@@ -14,11 +16,11 @@ export default function CommandPage({
   onCopy,
 }: CommandPageProps) {
   const [isCopied, setIsCopied] = useState(false);
-  setIsCopied(true);
-  setTimeout(() => {
-    setIsCopied(false);
-  }, 1000);
   const handleCopy = () => {
+    setIsCopied(true);
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 1000);
     navigator.clipboard.writeText(syntax).then(() => {
       if (onCopy) {
         onCopy();

src/shared/hooks/useTimer.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+
+export const useTimer = (timeInSeconds: number) => {
+  const [timeLeft, setTimeLeft] = useState(timeInSeconds);
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft((prev) => (prev > 0 ? prev - 1 : 0));
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return {
+    timeLeft,
+  };
+};