Skip to content

Commit 348b267

Browse files
KaviiSuriKaviiSuri
authored
fix: code organisation and rendering (#58)
1 parent 1eeca00 commit 348b267

File tree

6 files changed

+105
-96
lines changed

6 files changed

+105
-96
lines changed

‎src/components/Playground/Playground.tsx

Lines changed: 23 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,45 @@
11
'use client';
22

33
import Image from 'next/image';
4-
import { Dice1, Dice3, Dice5, Info } from 'lucide-react';
5-
6-
// Components
7-
import Shell from '@/components/Shell/Shell';
84
import SearchBox from '@/components/Search/SearchBox';
5+
import { TerminalUI } from './TerminalUI';
96

107
// utils
11-
import { formatTime } from '@/shared/utils/commonUtils';
12-
import { usePlayground } from './hooks/usePlayground';
138

149
export default function Playground() {
15-
const { decreaseCommandsLeft, search, timeLeft, commandsLeft, setSearch } =
16-
usePlayground();
17-
1810
return (
1911
<div className="container mx-auto flex flex-col flex-grow min-h-screen bg-white text-gray-900">
20-
<header className="navbar flex items-center justify-between py-5">
21-
<div className="flex items-center">
22-
<Image
23-
src="/images/dicedb-logo-light.png"
24-
width={110}
25-
height={110}
26-
priority={true}
27-
alt="DiceDB logo"
28-
className="object-contain"
29-
unoptimized
30-
/>
31-
<h2 className="font-light text-2xl ml-2">PlayGround</h2>
32-
</div>
33-
</header>
12+
<Header />
3413

3514
<main className="flex flex-col lg:flex-row gap-10 flex-grow overflow-hidden px-4">
3615
<div className="w-full lg:w-7/12 flex flex-col">
37-
<div className="bg-gray-900 rounded-lg">
38-
<div className="bg-gray-900 px-4 py-4 flex items-center rounded-lg">
39-
<div className="flex space-x-2">
40-
<Dice5 className="w-4 h-4 bg-red-500" />
41-
<Dice1 className="w-4 h-4 bg-yellow-500" />
42-
<Dice3 className="w-4 h-4 bg-green-500" />
43-
</div>
44-
</div>
45-
<div className="h-64 md:h-[30rem] bg-gray-100 rounded-lg overflow-hidden shadow-md">
46-
<Shell decreaseCommandsLeft={decreaseCommandsLeft} />
47-
</div>
48-
</div>
49-
50-
<div className="flex flex-col">
51-
<div className="flex flex-row justify-between text-gray-900 mt-4">
52-
<div className="flex justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg">
53-
<span>Cleanup in : {formatTime(timeLeft)} mins</span>
54-
</div>
55-
<div className="flex justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg">
56-
<span>Commands left: {commandsLeft}</span>
57-
</div>
58-
</div>
59-
<div className="flex flex-row items-start mt-5">
60-
<Info className="w-4 h-4 text-gray-500 mr-1" />
61-
<p className="text-sm text-gray-500">
62-
DiceDB instance is shared across all users.
63-
</p>
64-
</div>
65-
</div>
16+
<TerminalUI />
6617
</div>
67-
6818
<div className="w-full lg:w-5/12 flex flex-col">
6919
<div className="flex-grow border border-gray-400 bg-gray-100 p-4 rounded-lg shadow-md mb-4">
70-
<SearchBox search={search} setSearch={setSearch} />
20+
<SearchBox />
7121
</div>
7222
</div>
7323
</main>
7424
</div>
7525
);
7626
}
27+
28+
function Header() {
29+
return (
30+
<header className="navbar flex items-center justify-between py-5">
31+
<div className="flex items-center">
32+
<Image
33+
src="/images/dicedb-logo-light.png"
34+
width={110}
35+
height={110}
36+
priority={true}
37+
alt="DiceDB logo"
38+
className="object-contain"
39+
unoptimized
40+
/>
41+
<h2 className="font-light text-2xl ml-2">PlayGround</h2>
42+
</div>
43+
</header>
44+
);
45+
}

‎src/components/Playground/TerminalUI.tsx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { Dice1, Dice3, Dice5, Info } from 'lucide-react';
2+
import Shell from '../Shell/Shell';
3+
import { formatTime } from '@/shared/utils/commonUtils';
4+
import { useTimer } from '@/shared/hooks/useTimer';
5+
import { useState } from 'react';
6+
7+
export function TerminalUI() {
8+
const [commandsLeft, setCommandsLeft] = useState(1000);
9+
const decreaseCommandsLeft = () => {
10+
setCommandsLeft((prev) => (prev > 0 ? prev - 1 : 0));
11+
};
12+
return (
13+
<>
14+
<div className="bg-gray-900 rounded-lg">
15+
<div className="bg-gray-900 px-4 py-4 flex items-center rounded-lg">
16+
<div className="flex space-x-2">
17+
<Dice5 className="w-4 h-4 bg-red-500" />
18+
<Dice1 className="w-4 h-4 bg-yellow-500" />
19+
<Dice3 className="w-4 h-4 bg-green-500" />
20+
</div>
21+
</div>
22+
<div className="h-64 md:h-[30rem] bg-gray-100 rounded-lg overflow-hidden shadow-md">
23+
<Shell decreaseCommandsLeft={decreaseCommandsLeft} />
24+
</div>
25+
</div>
26+
<TerminalCounter commandsLeft={commandsLeft} />
27+
</>
28+
);
29+
}
30+
31+
function TerminalCounter({ commandsLeft }: { commandsLeft: number }) {
32+
const { timeLeft } = useTimer(15 * 60);
33+
return (
34+
<div className="flex flex-col">
35+
<div className="flex flex-row justify-between text-gray-900 mt-4">
36+
<div className="flex justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg">
37+
<span>Cleanup in : {formatTime(timeLeft)} mins</span>
38+
</div>
39+
<div className="flex justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg">
40+
<span>Commands left: {commandsLeft}</span>
41+
</div>
42+
</div>
43+
<div className="flex flex-row items-start mt-5">
44+
<Info className="w-4 h-4 text-gray-500 mr-1" />
45+
<p className="text-sm text-gray-500">
46+
DiceDB instance is shared across all users.
47+
</p>
48+
</div>
49+
</div>
50+
);
51+
}

‎src/components/Playground/hooks/usePlayground.ts

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎src/components/Search/SearchBox.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
'use client';
22

3-
import { SetStateAction, Dispatch } from 'react';
3+
import { useMemo, useState } from 'react';
44
import { Search } from 'lucide-react';
55
import { DiceCmds, DiceCmdMeta } from '@/data/command';
66
import CommandPage from './command';
77

8-
interface SearchBoxProps {
9-
search: string;
10-
setSearch: Dispatch<SetStateAction<string>>;
11-
}
12-
13-
export default function SearchBox({ search, setSearch }: SearchBoxProps) {
14-
const filteredCommands = Object.values(DiceCmds).filter((cmd: DiceCmdMeta) =>
15-
cmd.title.toLowerCase().includes(search.toLowerCase()),
8+
export default function SearchBox() {
9+
const [search, setSearch] = useState('');
10+
const filteredCommands = useMemo(
11+
() =>
12+
Object.values(DiceCmds).filter((cmd: DiceCmdMeta) =>
13+
cmd.title.toLowerCase().includes(search.toLowerCase()),
14+
),
15+
[search],
1616
);
1717

1818
return (

‎src/components/Search/command.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import { Clipboard } from 'lucide-react';
24
import { DiceCmdMeta } from '@/data/command';
35
import { useState } from 'react';
@@ -14,11 +16,11 @@ export default function CommandPage({
1416
onCopy,
1517
}: CommandPageProps) {
1618
const [isCopied, setIsCopied] = useState(false);
17-
setIsCopied(true);
18-
setTimeout(() => {
19-
setIsCopied(false);
20-
}, 1000);
2119
const handleCopy = () => {
20+
setIsCopied(true);
21+
setTimeout(() => {
22+
setIsCopied(false);
23+
}, 1000);
2224
navigator.clipboard.writeText(syntax).then(() => {
2325
if (onCopy) {
2426
onCopy();

‎src/shared/hooks/useTimer.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { useEffect, useState } from 'react';
2+
3+
export const useTimer = (timeInSeconds: number) => {
4+
const [timeLeft, setTimeLeft] = useState(timeInSeconds);
5+
useEffect(() => {
6+
const timer = setInterval(() => {
7+
setTimeLeft((prev) => (prev > 0 ? prev - 1 : 0));
8+
}, 1000);
9+
10+
return () => clearInterval(timer);
11+
}, []);
12+
13+
return {
14+
timeLeft,
15+
};
16+
};

0 commit comments

Comments
 (0)