From 0f28238a6fd0ab41203d3e2e9296853aa5d169e9 Mon Sep 17 00:00:00 2001 From: saiphanindra1010ddsd Date: Tue, 1 Oct 2024 21:05:55 +0530 Subject: [PATCH 1/7] adding new design+new download functionality --- src/components/Playground/Playground.tsx | 153 +++++++++++++++++++---- 1 file changed, 127 insertions(+), 26 deletions(-) diff --git a/src/components/Playground/Playground.tsx b/src/components/Playground/Playground.tsx index ce67268..2abbd4e 100644 --- a/src/components/Playground/Playground.tsx +++ b/src/components/Playground/Playground.tsx @@ -3,17 +3,73 @@ "use client"; import Image from "next/image"; -import React, { useState, useEffect } from "react"; +import React, { useState,useRef, useEffect } from "react"; import Cli from "@/components/CLI/CLI"; import SearchBox from "@/components/Search/SearchBox"; -import { Dice1, Dice3, Dice5 } from "lucide-react"; +import { Dice1, Dice3, Dice5, Clock, Command, Sun, Moon, Github, Download } from "lucide-react"; + import { formatTime } from "@/shared/utils/commonUtils"; +import Link from "next/link"; + + + +const NavBar: React.FC<{ isDarkMode: boolean; toggleDarkMode: () => void }> = ({ isDarkMode, toggleDarkMode }) => ( + +); export default function Playground() { const [search, setSearch] = useState(""); const [timeLeft, setTimeLeft] = useState(15 * 60); const [commandsLeft, setCommandsLeft] = useState(1000); + const [isDarkMode, setIsDarkMode] = useState(false); + const downloadBtnRef = useRef(null); + const cliCodeRef = useRef(null); + useEffect(() => { + const downloadBtn = downloadBtnRef.current; + const cliCode = cliCodeRef.current; + + if (downloadBtn && cliCode) { + downloadBtn.addEventListener('click', () => { + const code = cliCode.textContent || ''; + const blob = new Blob([code], { type: 'text/plain' }); + const link = document.createElement('a'); + link.href = URL.createObjectURL(blob); + link.download = 'code.txt'; + link.click(); + }); + } + }, []); useEffect(() => { const timer = setInterval(() => { setTimeLeft((prev) => (prev > 0 ? prev - 1 : 0)); @@ -25,9 +81,14 @@ export default function Playground() { const decreaseCommandsLeft = () => { setCommandsLeft((prev) => (prev > 0 ? prev - 1 : 0)); }; + const toggleDarkMode = (): void => { + setIsDarkMode(!isDarkMode); + }; return (
+ +

PlayGround

+
-
-
-
-
-
- - - +
+ +
+
+ +
+ +
+ + + +
+
+ +
+ +
+
+ +
+
+
+ + Cleanup in: +
+
{formatTime(timeLeft)}
+
+
+
+
+
+
+ + Commands left: +
+
{commandsLeft}
+
+
+
+
-
- -
-
-
-
- Cleanup in : {formatTime(timeLeft)} mins + +
+
+
-
- Command left: {commandsLeft} +
+

Recent Commands

+
    + {['SELECT * FROM users', 'INSERT INTO products', 'UPDATE orders SET status = "shipped"'].map((cmd, index) => ( +
  • + {cmd} +
    • + ))} +
-
-
-
- -
-
-
+ +
); } From d0978140deeff4fea5bcdd23be9693e34d52d2b4 Mon Sep 17 00:00:00 2001 From: saiphanindra1010ddsd Date: Tue, 1 Oct 2024 21:26:28 +0530 Subject: [PATCH 2/7] remove inconsistent icon --- src/components/Playground/Playground.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Playground/Playground.tsx b/src/components/Playground/Playground.tsx index 2abbd4e..ef96434 100644 --- a/src/components/Playground/Playground.tsx +++ b/src/components/Playground/Playground.tsx @@ -30,7 +30,6 @@ const NavBar: React.FC<{ isDarkMode: boolean; toggleDarkMode: () => void }> = ({ Docs Blogs - GitHub From 3953c97ea0c48a90032f2736e2ce6d3d171a2946 Mon Sep 17 00:00:00 2001 From: saiphanindra1010ddsd Date: Tue, 1 Oct 2024 21:51:06 +0530 Subject: [PATCH 3/7] removed darkmode --- src/components/Playground/Playground.tsx | 24 ++++++++---------------- 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/src/components/Playground/Playground.tsx b/src/components/Playground/Playground.tsx index ef96434..6a1b646 100644 --- a/src/components/Playground/Playground.tsx +++ b/src/components/Playground/Playground.tsx @@ -6,7 +6,7 @@ import Image from "next/image"; import React, { useState,useRef, useEffect } from "react"; import Cli from "@/components/CLI/CLI"; import SearchBox from "@/components/Search/SearchBox"; -import { Dice1, Dice3, Dice5, Clock, Command, Sun, Moon, Github, Download } from "lucide-react"; +import { Dice1, Dice3, Dice5, Clock, Command,Download } from "lucide-react"; import { formatTime } from "@/shared/utils/commonUtils"; import Link from "next/link"; @@ -14,7 +14,7 @@ import Link from "next/link"; -const NavBar: React.FC<{ isDarkMode: boolean; toggleDarkMode: () => void }> = ({ isDarkMode, toggleDarkMode }) => ( +const NavBar = () => ( ); + export default function Playground() { const [search, setSearch] = useState(""); const [timeLeft, setTimeLeft] = useState(15 * 60); @@ -62,20 +58,7 @@ export default function Playground() { return (
-
-
-
- DiceDB logo -

PlayGround

- -
-
+