+
+
+ setSearch(e.target.value)}
+ placeholder="Search commands..."
+ className="bg-transparent border-none outline-none w-full py-2 text-gray-900 font-assistant"
+ />
-
- {search.length > 1 &&
- filteredCommands.map((cmdMeta) => (
-
- ))}
+
+
+ {search.length > 1 ? (
+ filteredCommands.map((cmdMeta) => (
+
+ ))
+ ) : (
+
+ Type at least 2 characters to search commands...
+
+ )}
+
);
diff --git a/apps/playground-web/next.config.mjs b/apps/playground-web/next.config.mjs
index c4ea276..100abfa 100644
--- a/apps/playground-web/next.config.mjs
+++ b/apps/playground-web/next.config.mjs
@@ -3,14 +3,13 @@ const nextConfig = {
images: {
remotePatterns: [
{
- protocol: "https",
- hostname: "dicedb.io",
- port: "",
- pathname: "/**",
+ protocol: 'https',
+ hostname: 'dicedb.io',
+ port: '',
+ pathname: '/**',
},
],
},
- output: "export",
};
export default nextConfig;
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..3ac1dba
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,10 @@
+// components
+import Playground from '@/components/Playground/Playground';
+
+export default function Home() {
+ return (
+
+
+
+ );
+}
diff --git a/src/components/Playground/Playground.tsx b/src/components/Playground/Playground.tsx
new file mode 100644
index 0000000..9002a13
--- /dev/null
+++ b/src/components/Playground/Playground.tsx
@@ -0,0 +1,64 @@
+'use client';
+
+// Components
+import Cli from '@/components/CLI/CLI';
+import SearchBox from '@/components/Search/SearchBox';
+import { Dice1, Dice3, Dice5 } from 'lucide-react';
+
+// utils
+import { formatTime } from '@/shared/utils/commonUtils';
+
+// images and icons
+import { usePlayground } from './hooks/usePlayground';
+
+export default function Playground() {
+ const { decreaseCommandsLeft, search, timeLeft, commandsLeft, setSearch } =
+ usePlayground();
+
+ return (
+
+
+
+
+
+
+
+
+ Cleanup in:{' '}
+
+ {formatTime(timeLeft)} mins
+
+
+
+
+
+ Commands left:{' '}
+ {commandsLeft}
+
+
+
+
+
+
+ Command Search
+
+
+
+
+
+ );
+}