Skip to content

Commit cbf5f2b

Browse files
RamGoelRamGoel
committed
feat: optimize for mobile
1 parent 667df20 commit cbf5f2b

File tree

3 files changed

+83
-56
lines changed

3 files changed

+83
-56
lines changed

‎apps/playground-web/components/Playground/Playground.tsx

Lines changed: 62 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
'use client';
22

33
import Image from 'next/image';
4+
import SearchBox from '@/components/Search/SearchBox';
45
import { TerminalUI } from './TerminalUI';
56
import Link from 'next/link';
67
import { Button } from '@dicedb/ui/button';
@@ -9,44 +10,8 @@ import { Terminal } from 'lucide-react';
910
import CommandProvider, { useCommandContext } from '@/context/command';
1011
import CommandPanel from '../Overlays/CommandPanel';
1112

12-
// utils
13-
14-
function PlaygroundUI() {
15-
const { isOpen } = useCommandContext();
16-
return (
17-
<>
18-
<div
19-
data-testid="playground"
20-
className={`p-4 lg:p-0 lg:pl-[5%] transition-all duration-300 flex flex-col flex-grow h-screen bg-white text-gray-900 ${
21-
isOpen ? 'w-[73%]' : 'w-[95%]'
22-
}`}
23-
>
24-
<Header />
25-
26-
<main
27-
data-testid="playground-main"
28-
className="h-full flex flex-col lg:flex-row gap-10 flex-grow overflow-hidden"
29-
>
30-
<div className="w-full flex flex-col flex-grow">
31-
<TerminalUI />
32-
</div>
33-
</main>
34-
</div>
35-
<CommandPanel />
36-
</>
37-
);
38-
}
39-
40-
export default function Playground() {
41-
return (
42-
<CommandProvider>
43-
<PlaygroundUI />
44-
</CommandProvider>
45-
);
46-
}
47-
4813
function Header() {
49-
const { setIsOpen, isOpen } = useCommandContext();
14+
const { setIsOpen } = useCommandContext();
5015
return (
5116
<header
5217
data-testid="playground-header"
@@ -89,18 +54,67 @@ function Header() {
8954
Submit an Issue
9055
</Button>
9156
</Link>
92-
{!isOpen ? (
93-
<Button
94-
onClick={() => setIsOpen(true)}
95-
variant="outline"
96-
className="mt-2 w-fit gap-2 border-1 border-gray-700 !bg-gray-700 hover:scale-95 transition text-white flex items-center justify-center rounded-lg"
97-
data-testid="submit-issue-button"
98-
>
99-
<Terminal className="h-4 w-4" />
100-
Commands
101-
</Button>
102-
) : null}
57+
<Button
58+
onClick={() => setIsOpen(true)}
59+
variant="outline"
60+
className="mt-2 hidden lg:flex w-fit gap-2 border-1 border-gray-700 !bg-gray-700 hover:scale-95 transition text-white items-center justify-center rounded-lg"
61+
data-testid="submit-issue-button"
62+
>
63+
<Terminal className="h-4 w-4" />
64+
Commands
65+
</Button>
10366
</div>
10467
</header>
10568
);
10669
}
70+
71+
function Commands() {
72+
return (
73+
<>
74+
<div data-testid="searchbox-container" className="hidden lg:block">
75+
<CommandPanel />
76+
</div>
77+
<div
78+
data-testid="searchbox-container"
79+
className="h-2/6 lg:h-full w-full lg:w-[40%] flex lg:hidden flex-col pb-4"
80+
>
81+
<div
82+
data-testid="searchbox-wrapper"
83+
className="h-full w-full flex-grow border border-gray-400 bg-gray-100 p-4 pb-0 rounded-lg shadow-md"
84+
>
85+
<SearchBox />
86+
</div>
87+
</div>
88+
</>
89+
);
90+
}
91+
92+
function PlaygroundUI() {
93+
const { isOpen } = useCommandContext();
94+
return (
95+
<div
96+
data-testid="playground"
97+
className={`p-4 lg:p-0 flex flex-col h-screen bg-white text-gray-900 ${isOpen ? 'transition-all duration-200 lg:ml-[4%] lg:mr-[28%]' : 'lg:mx-[4%] mx-auto'}`}
98+
>
99+
<Header />
100+
101+
<main
102+
data-testid="playground-main"
103+
className="h-full flex flex-col lg:flex-row gap-10 lg:gap-0 flex-grow overflow-hidden"
104+
>
105+
<div className="h-4/6 lg:h-full w-full flex flex-col">
106+
<TerminalUI />
107+
</div>
108+
<Commands />
109+
</main>
110+
</div>
111+
);
112+
}
113+
114+
export default function Playground() {
115+
return (
116+
<CommandProvider>
117+
<PlaygroundUI />
118+
</CommandProvider>
119+
);
120+
}

‎apps/playground-web/components/Playground/TerminalUI.tsx

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,8 @@ function TerminalCounter({
5151
return (
5252
<div className="flex flex-col" data-testid="terminal-counter">
5353
<div className="flex items-center justify-between text-gray-900 my-4">
54-
<div className="flex flex-row items-center justify-center md:justify-start">
55-
<Info className="w-4 h-4 text-gray-500 mr-1" />
56-
<p className="text-sm text-gray-500">
57-
DiceDB instance is shared across all users.
58-
</p>
59-
</div>
60-
<div className="flex flex-row items-center space-x-2">
54+
<InstanceMessage extraClassname="hidden lg:flex" />
55+
<div className="w-full flex justify-between md:justify-end items-center space-x-2">
6156
<div
6257
className="flex items-center justify-between gap-1 border border-gray-400 text-sm bg-transparent p-3 rounded-lg"
6358
data-testid="cleanup-timer"
@@ -80,6 +75,24 @@ function TerminalCounter({
8075
</div>
8176
</div>
8277
</div>
78+
<InstanceMessage extraClassname="lg:hidden" />
8379
</div>
8480
);
8581
}
82+
83+
const InstanceMessage = ({
84+
extraClassname = '',
85+
}: {
86+
extraClassname?: string;
87+
}) => {
88+
return (
89+
<div
90+
className={`flex flex-row w-full items-center gap-2 justify-center md:justify-start ${extraClassname}`}
91+
>
92+
<Info className="w-4 h-4 text-gray-500" />
93+
<p className="text-sm text-gray-500">
94+
DiceDB instance is shared across all users.
95+
</p>
96+
</div>
97+
);
98+
};

‎apps/playground-web/context/command.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const CommandContext = createContext<{
1111
export const useCommandContext = () => useContext(CommandContext);
1212

1313
const CommandProvider = ({ children }: { children: React.ReactNode }) => {
14-
const [isOpen, setIsOpen] = useState(true);
14+
const [isOpen, setIsOpen] = useState(false);
1515

1616
return (
1717
<CommandContext.Provider value={{ isOpen, setIsOpen }}>

0 commit comments

Comments
 (0)