#40: Refactor UI search box component

src/components/Playground/Playground.tsx

@@ -1,45 +1,76 @@
 '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 />
+      <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>
 
       <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">
-          <TerminalUI />
+          <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>
         </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 />
+            <SearchBox search={search} setSearch={setSearch} />
           </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/hooks/usePlayground.ts

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+
+export const usePlayground = () => {
+  const [search, setSearch] = useState('');
+  const [timeLeft, setTimeLeft] = useState<number>(15 * 60);
+  const [commandsLeft, setCommandsLeft] = useState<number>(1000);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft((prev) => (prev > 0 ? prev - 1 : 0));
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  const decreaseCommandsLeft = () => {
+    setCommandsLeft((prev) => (prev > 0 ? prev - 1 : 0));
+  };
+
+  return {
+    decreaseCommandsLeft,
+    search,
+    timeLeft,
+    commandsLeft,
+    setSearch,
+    setTimeLeft,
+    setCommandsLeft,
+  };
+};

src/components/Search/NotFoundPage.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const NotFoundPage = ({ url }: { url: string }) => {
+  return (
+    <div className="p-6 bg-gray-100 text-white rounded-lg shadow-lg border border-gray-700 mb-4">
+      <h2 className="text-gray-700 text-2xl font-semibold mb-4">
+        No matching data was found🥺
+      </h2>
+
+      <div className="flex items-center justify-between mb-4 pt-4">
+        <h3 className="text-gray-700 text-2xl font-semibold">
+          Try refining your search or browse the documentation for common
+          commands.
+        </h3>
+      </div>
+      <a
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-blue-400 hover:text-blue-300 underline font-medium transition-colors duration-200"
+      >
+        View Documentation
+      </a>
+    </div>
+  );
+};
+
+export default NotFoundPage;

src/components/Search/SearchBox.tsx

@@ -1,18 +1,19 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { SetStateAction, Dispatch } from 'react';
 import { Search } from 'lucide-react';
 import { DiceCmds, DiceCmdMeta } from '@/data/command';
 import CommandPage from './command';
+import NotFoundPage from './NotFoundPage';
 
-export default function SearchBox() {
-  const [search, setSearch] = useState('');
-  const filteredCommands = useMemo(
-    () =>
-      Object.values(DiceCmds).filter((cmd: DiceCmdMeta) =>
-        cmd.title.toLowerCase().includes(search.toLowerCase()),
-      ),
-    [search],
+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()),
   );
 
   return (
@@ -30,7 +31,8 @@ export default function SearchBox() {
         </div>
       </div>
       <div className="mt-4 space-y-4 max-h-[500px] lg:max-h-[870px] xl:max-h-[890px] overflow-y-auto">
-        {search.length > 1 &&
+        {search.length > 1 ? (
+          filteredCommands.length > 0 &&
           filteredCommands.map((cmdMeta) => (
             <CommandPage
               key={cmdMeta.title}
@@ -39,7 +41,15 @@ export default function SearchBox() {
               body={cmdMeta.body}
               url={cmdMeta.url}
             />
-          ))}
+          ))
+        ) : (
+          <p className="text-lg font-semibold text-gray-500 mb-2">
+            Please enter a command with more than one word.
+          </p>
+        )}
+        {search.length > 1 && filteredCommands.length === 0 && (
+          <NotFoundPage url="https://dicedb.io/commands/auth/" />
+        )}
       </div>
     </div>
   );

src/components/Search/command.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Clipboard } from 'lucide-react';
 import { DiceCmdMeta } from '@/data/command';
 import { useState } from 'react';
@@ -16,11 +14,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();