Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding new design+new download functionality #13

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Adding new design+new download functionality #13

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0f28238
adding new design+new download functionality
saiphanindra1010 Oct 1, 2024
d097814
remove inconsistent icon
saiphanindra1010 Oct 1, 2024
3953c97
removed darkmode
saiphanindra1010 Oct 1, 2024
768ce16
removed download
saiphanindra1010 Oct 1, 2024
0ee2437
Merge branch 'master' of https://github.com/DiceDB/playground-web int…
saiphanindra1010 Oct 1, 2024
fb17ca6
removed hardcoded data
saiphanindra1010 Oct 1, 2024
ad72112
revert commends
saiphanindra1010 Oct 1, 2024
c841ab8
nav fix
saiphanindra1010 Oct 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 89 additions & 44 deletions src/components/Playground/Playground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,46 @@
"use client";

import Image from "next/image";
import React, { useState, useEffect } from "react";

import { Dice1, Dice3, Dice5 } from "lucide-react";

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 } from "lucide-react";

import { formatTime } from "@/shared/utils/commonUtils";
import Link from "next/link";



const NavBar = () => (
<nav className="shadow-md">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="flex items-center">
<Image
src="https://dicedb.io/dicedb-logo-light.png"
width={80}
height={80}
alt="DiceDB logo"
className="object-contain"
/>
<h2 className="font-light text-2xl ml-2">PlayGround</h2>
</div>
<div className="flex items-center space-x-4">
<Link href="https://dicedb.io/get-started/installation/" className="px-3 py-2 rounded-md text-sm font-medium">Docs</Link>
<Link href="https://dicedb.io/blog/" className="px-3 py-2 rounded-md text-sm font-medium">Blogs</Link>
<Link href="https://github.com/dicedb/dice" className="px-3 py-2 rounded-md text-sm font-medium">GitHub</Link>
</div>
</div>
</div>
</nav>
);

export default function Playground() {
const [search, setSearch] = useState("");
const [timeLeft, setTimeLeft] = useState<number>(15 * 60);
const [commandsLeft, setCommandsLeft] = useState<number>(1000);
const cliCodeRef = useRef<HTMLDivElement>(null);


useEffect(() => {
const timer = setInterval(() => {
Expand All @@ -26,53 +54,70 @@ export default function Playground() {
setCommandsLeft((prev) => (prev > 0 ? prev - 1 : 0));
};

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="https://dicedb.io/dicedb-logo-light.png"
width={110}
height={110}
priority={true}
alt="DiceDB logo"
className="object-contain"
/>
<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-1/2 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" />
return (
<div className="container mx-auto flex flex-col flex-grow min-h-screen bg-white text-gray-900 line-height-[1.5rem]">
<NavBar />
<div className="container mx-auto px-4 py-8">
<main className="grid grid-cols-1 md:grid-cols-2 gap-8">

<div className="space-y-4">
<div className="border border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden">

<div className="bg-gray-100 dark:bg-gray-800 px-4 py-2 flex items-center">

<div className="flex space-x-2">
<Dice5 className="w-4 h-4 text-red-500" />
<Dice1 className="w-4 h-4 text-yellow-500" />
<Dice3 className="w-4 h-4 text-green-500" />
</div>
</div>

<div ref={cliCodeRef} className="h-80 bg-gray-900">
<Cli decreaseCommandsLeft={decreaseCommandsLeft} />
</div>
</div>
</div>
<div className="h-64 md:h-96 bg-gray-100 rounded-lg overflow-hidden shadow-md">
<Cli decreaseCommandsLeft={decreaseCommandsLeft} />
</div>
</div>

<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>Command left: {commandsLeft}</span>
<div className="flex justify-between">
<div className="w-[48%] border border-gray-300 dark:border-gray-700 rounded-lg p-4">
<div className="flex items-center space-x-2 mb-2">
<Clock className="text-red-600 dark:text-red-700" />
<span className="font-semibold">Cleanup in:</span>
</div>
<div className="text-2xl font-bold">{formatTime(timeLeft)}</div>
<div className="mt-2 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
<div
className="bg-red-600 dark:bg-red-700 h-2 rounded-full"
style={{ width: `${(timeLeft / (15 * 60)) * 100}%` }}
></div>
</div>
</div>
<div className="w-[48%] border border-gray-300 dark:border-gray-700 rounded-lg p-4">
<div className="flex items-center space-x-2 mb-2">
<Command className="text-green-600 dark:text-green-600" />
<span className="font-semibold">Commands left:</span>
</div>
<div className="text-2xl font-bold">{commandsLeft}</div>
<div className="mt-2 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
<div
className="bg-green-600 dark:bg-green-600 h-2 rounded-full"
style={{ width: `${(commandsLeft / 1000) * 100}%` }}
></div>
</div>
</div>
</div>
</div>
</div>
</div>

<div className="w-full lg:w-1/2 flex flex-col">
<div className="space-y-4 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} />
</div>
</div>
</main>
</div>


</div>
</main>
</div>
</div>
);
}
Loading