Skip to content

Commit

Permalink
fix: ui fixes for playground
Browse files Browse the repository at this point in the history
  • Loading branch information
@KaviiSuri
KaviiSuri committed Nov 5, 2024
1 parent 1f1f3e0 commit 7a4b4e0
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 34 deletions.
10 changes: 5 additions & 5 deletions apps/playground-web/components/Playground/Playground.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,24 @@ export default function Playground() {
return (
<div
data-testid="playground"
className="container mx-auto flex flex-col flex-grow min-h-screen bg-white text-gray-900"
className="container mx-auto p-4 lg:p-0 flex flex-col flex-grow h-screen bg-white text-gray-900"
>
<Header />

<main
data-testid="playground-main"
className="flex flex-col lg:flex-row gap-10 flex-grow overflow-hidden px-4"
className="h-full flex flex-col lg:flex-row gap-10 flex-grow overflow-hidden"
>
<div className="w-full lg:w-7/12 flex flex-col">
<div className="h-4/6 lg:h-full w-full lg:w-[60%] flex flex-col">
<TerminalUI />
</div>
<div
data-testid="searchbox-container"
className="w-full lg:w-5/12 flex flex-col"
className="h-2/6 lg:h-full w-full lg:w-[40%] flex flex-col pb-4"
>
<div
data-testid="searchbox-wrapper"
className="flex-grow border border-gray-400 bg-gray-100 p-4 rounded-lg shadow-md mb-4"
className="h-full w-full flex-grow border border-gray-400 bg-gray-100 p-4 pb-0 rounded-lg shadow-md"
>
<SearchBox />
</div>
Expand Down
28 changes: 18 additions & 10 deletions apps/playground-web/components/Playground/TerminalUI.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@ export function TerminalUI({ initialCommandsLeft = 1000 }) {

return (
<>
<div className="bg-gray-900 rounded-lg" data-testid="terminal-container">
<div
className="h-full max-h-[26rem] bg-gray-900 rounded-lg flex flex-col"
data-testid="terminal-container"
>
<div className="bg-gray-900 px-4 py-4 flex items-center rounded-lg">
<div className="flex space-x-2" data-testid="dice-icons">
<Dice5 className="w-4 h-4 bg-red-500" />
Expand All @@ -24,7 +27,7 @@ export function TerminalUI({ initialCommandsLeft = 1000 }) {
</div>
</div>
<div
className="h-64 md:h-[30rem] bg-gray-100 rounded-lg overflow-hidden shadow-md"
className="h-full md:h-[30rem] bg-gray-100 rounded-lg overflow-hidden shadow-md"
data-testid="shell-container"
>
<Shell onCommandExecuted={handleCommandExecuted} />
Expand All @@ -50,26 +53,31 @@ function TerminalCounter({
<div className="flex flex-row justify-between text-gray-900 mt-4">
<div className="flex flex-row items-center space-x-2">
<div
className="flex items-center justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg"
className="flex items-center justify-between gap-1 border border-gray-400 text-sm bg-transparent p-3 rounded-lg"
data-testid="cleanup-timer"
>
<span>Cleanup in: {formatTime(cleanupTimeLeft)} mins</span>
<Tooltip message="The time remaining until cleanup is initiated." />
<span>
<span className="font-semibold">Cleanup in:</span>{' '}
{formatTime(cleanupTimeLeft)} mins
</span>
</div>
<Tooltip message="The time remaining until cleanup is initiated." />
</div>

<div className="flex flex-row items-center space-x-2">
<div
className="flex items-center justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg"
className="flex items-center justify-between gap-1 border border-gray-400 text-sm bg-transparent p-3 rounded-lg"
data-testid="commands-left"
>
<span>Commands left: {commandsLeft}</span>
<Tooltip message="The number of commands you can execute before cleanup." />{' '}
<span>
<span className="font-semibold">Commands left:</span>
{commandsLeft}
</span>
</div>
<Tooltip message="The number of commands you can execute before cleanup." />{' '}
{/* Tooltip next to text */}
</div>
</div>
<div className="flex flex-row items-start mt-5">
<div className="flex flex-row items-center mt-5 justify-center md:justify-start">
<Info className="w-4 h-4 text-gray-500 mr-1" />
<p className="text-sm text-gray-500">
DiceDB instance is shared across all users.
Expand Down
4 changes: 2 additions & 2 deletions apps/playground-web/components/Search/CommandPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function CommandPage({
return (
<div
data-testid="command-page"
className="p-6 bg-gray-100 text-white rounded-lg shadow-lg border border-gray-700 mb-4"
className="w-full p-6 bg-gray-100 text-white rounded-lg shadow-lg border border-gray-700 mb-4"
>
<h2
data-testid="command-title"
Expand Down Expand Up @@ -65,7 +65,7 @@ export default function CommandPage({
<div className="bg-gray-200 rounded-lg relative overflow-x-auto p-4">
<code
data-testid="command-syntax"
className="font-mono text-sm whitespace-pre text-gray-700 inline-block min-w-full"
className="font-mono text-sm text-gray-700 block w-full"
>
{syntax}
</code>
Expand Down
58 changes: 44 additions & 14 deletions apps/playground-web/components/Search/SearchBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,11 @@ export default function SearchBox() {
);

return (
<div className="w-full max-w-3xl mx-auto" data-testid="search-container">
<div className="mb-4">
<div
className="h-full w-full max-w-3xl mx-auto overflow-hidden"
data-testid="search-container"
>
<div className="">
<div className="flex items-center bg-gray-200 border border-gray-200 rounded px-2">
<Search className="text-gray-900 mr-2" />
<input
Expand All @@ -30,19 +33,46 @@ export default function SearchBox() {
/>
</div>
</div>
<div className="mt-4 space-y-4 max-h-[500px] lg:max-h-[870px] xl:max-h-[890px] overflow-y-auto">
{search.length > 1 &&
filteredCommands.map((cmdMeta) => (
<CommandPage
key={cmdMeta.title}
title={cmdMeta.title}
syntax={cmdMeta.syntax}
body={cmdMeta.body}
url={cmdMeta.url}
data-testid={`command-title-${cmdMeta.title}`}
/>
))}
<div className="mt-4 max-w-full space-y-4 h-full overflow-y-auto">
{filteredCommands.map((cmdMeta) => (
<CommandPage
key={cmdMeta.title}
title={cmdMeta.title}
syntax={cmdMeta.syntax}
body={cmdMeta.body}
url={cmdMeta.url}
data-testid={`command-title-${cmdMeta.title}`}
/>
))}
{filteredCommands.length === 0 && <NotFoundPage />}
</div>
</div>
);
}

const NotFoundPage = () => {
return (
<div
className="w-full p-6 bg-gray-100 text-white rounded-lg shadow-lg border border-gray-700 mb-4"
>
<h2 className="text-gray-700 text-2xl font-semibold mb-4">
No matching data was found🥺
</h2>

<div className="flex items-center justify-between mb-4 pt-4">
<h3 className="text-gray-700 text-l font-medium">
Try refining your search or browse the documentation for common
commands.
</h3>
</div>
<a
href="https://dicedb.io/commands/auth/"
target="_blank"
rel="noopener noreferrer"
className="text-blue-400 hover:text-blue-300 underline font-medium transition-colors duration-200"
>
View Documentation
</a>
</div>
);
};
6 changes: 3 additions & 3 deletions tooling/eslint-config/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@
"react-internal.js"
],
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^7.1.0",
"@typescript-eslint/parser": "^7.1.0",
"@vercel/style-guide": "^5.2.0",
"eslint-config-turbo": "^2.0.0",
"eslint-config-prettier": "^9.1.0",
"eslint-config-turbo": "^2.0.0",
"eslint-plugin-only-warn": "^1.1.0",
"@typescript-eslint/parser": "^7.1.0",
"@typescript-eslint/eslint-plugin": "^7.1.0",
"typescript": "^5.3.3"
}
}

0 comments on commit 7a4b4e0

Please sign in to comment.