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

Fixes/UI changes #27

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

Fixes/UI changes #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0a3fd1e
UI Fixes
Akshaygore1 Oct 2, 2024
427f138
clean up
Akshaygore1 Oct 2, 2024
7f70e04
Merge branch 'master' into fixes/ui-changes
Akshaygore1 Oct 11, 2024
c246ef5
Conflict resoleved
Akshaygore1 Oct 11, 2024
effcb4a
changed footer
Akshaygore1 Oct 11, 2024
9621f9f
Resolved conflicts with upstream
Akshaygore1 Oct 11, 2024
543a882
fixed command search height
Akshaygore1 Oct 11, 2024
58c0c2e
Merge branch 'master' into fixes/ui-changes
Akshaygore1 Oct 17, 2024
6db8662
Removed unsed things
Akshaygore1 Oct 17, 2024
84cb262
Added Formatting
Akshaygore1 Oct 17, 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
8 changes: 7 additions & 1 deletion apps/playground-web/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import type { Metadata } from 'next';

// styles
import '@/styles/globals.css';
import Header from '@/components/Header/Header';
import Footer from '@/components/Footer/Footer';

export const metadata: Metadata = {
title: 'DiceDB Playground',
Expand All @@ -21,7 +23,11 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<body>{children}</body>
<body>
<Header />
{children}
<Footer />
</body>
</html>
);
}
2 changes: 0 additions & 2 deletions apps/playground-web/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
// components
import Playground from '@/components/Playground/Playground';
import Footer from '@/components/Footer/Footer';

export default function Home() {
return (
<main data-testid="main-content">
<Playground />
<Footer />
</main>
);
}
34 changes: 16 additions & 18 deletions apps/playground-web/components/Footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
'use client';

import React from 'react';
import { Twitter } from '@mui/icons-material';
import GitHub from '@mui/icons-material/GitHub';
Expand Down Expand Up @@ -53,34 +51,34 @@ export default function Footer() {
<h3 className="text-gray-500 font-semibold mb-4">Developers</h3>
<ul className="space-y-2">
<li>
<a
<Link
href="https://dicedb.io/get-started/installation"
target="_blank"
className="text-gray-600 hover:text-gray-900"
data-testid="quickstart-link"
>
Quickstart
</a>
</Link>
</li>
<li>
<a
<Link
href="https://dicedb.io/commands/get"
target="_blank"
className="text-gray-600 hover:text-gray-900"
data-testid="commands-link"
>
Commands
</a>
</Link>
</li>
<li>
<a
<Link
href="https://github.com/DiceDB/dice/tree/master/examples/leaderboard-go"
target="_blank"
className="text-gray-600 hover:text-gray-900"
data-testid="examples-link"
>
Examples
</a>
</Link>
</li>
</ul>
</div>
Expand All @@ -89,14 +87,14 @@ export default function Footer() {
<h3 className="text-gray-500 font-semibold mb-4">Examples</h3>
<ul className="space-y-2">
<li>
<a
<Link
href="https://github.com/DiceDB/dice/tree/master/examples/leaderboard-go"
target="_blank"
className="text-gray-600 hover:text-gray-900"
data-testid="leaderboard-link"
>
Real-time Leaderboard
</a>
</Link>
</li>
</ul>
</div>
Expand All @@ -105,44 +103,44 @@ export default function Footer() {
<h3 className="text-gray-500 font-semibold mb-4">Us and Socials</h3>
<ul className="space-y-2">
<li>
<a
<Link
href="mailto:[email protected]"
target="_blank"
className="text-gray-600 hover:text-gray-900"
data-testid="contact-link"
>
Contact Us
</a>
</Link>
</li>
</ul>
<div className="space-x-4 mt-4 items-center justify-items-center">
<a
<Link
href="https://discord.gg/6r8uXWtXh7"
target="_blank"
className="text-gray-400 hover:text-gray-600"
aria-label="People"
data-testid="people-icon-link"
>
<People className="h-6 w-6" />
</a>
<a
</Link>
<Link
href="https://twitter.com/thedicedb"
target="_blank"
className="text-gray-400 hover:text-gray-600"
aria-label="Twitter"
data-testid="twitter-icon-link"
>
<Twitter className="h-6 w-6" />
</a>
<a
</Link>
<Link
href="https://github.com/dicedb/dice"
target="_blank"
className="text-gray-400 hover:text-gray-600"
aria-label="GitHub"
data-testid="github-icon-link"
>
<GitHub className="h-6 w-6" />
</a>
</Link>
</div>
</div>
</div>
Expand Down
79 changes: 75 additions & 4 deletions apps/playground-web/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,80 @@
'use client';
import Image from 'next/image';
import Link from 'next/link';
import { ArrowRight, Github } from 'lucide-react';

async function fetchStars(): Promise<string> {
const formatNumber = (num: number): string =>
num >= 1000
? (num / 1000).toFixed(num % 1000 !== 0 ? 1 : 0) + 'k'
: num.toString();

try {
const response = await fetch('https://api.github.com/repos/dicedb/dice', {
next: { revalidate: 3600 },
});
if (!response.ok) {
throw new Error('Failed to fetch repository data');
}
const data = await response.json();
return formatNumber(data.stargazers_count);
} catch (err) {
console.error('Error fetching GitHub stars:', err);
return '0';
}
}

export default async function Header() {
const stars = await fetchStars();

export default function Header() {
return (
<header data-testid="header" className="flex items-center mb-4">
<h1 className="text-2xl font-bold">DiceDB PlayGround</h1>
<header className="w-full bg-white shadow-sm">
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
<div className="flex items-center gap-2">
<Link href="/" className="flex items-center space-x-2">
<Image
src="https://dicedb.io/dicedb-logo-light.png"
width={110}
height={110}
priority
alt="DiceDB logo"
className="h-8 w-auto object-contain"
/>
<span className="text-xl font-semibold">PlayGround</span>
</Link>
</div>
<nav className="flex items-center gap-6">
<Link
href="https://dicedb.io/get-started/installation/"
className="text-md font-medium hover:underline"
>
Docs
</Link>
<Link
href="https://dicedb.io/blog/"
className="text-md font-medium hover:underline"
>
Blog
</Link>
<Link
href="https://github.com/dicedb/dice"
className="inline-flex items-center space-x-2"
target="_blank"
rel="noopener noreferrer"
>
<Github className="h-5 w-5" />
<span className="text-sm font-medium">{stars}</span>
</Link>
<Link
href="https://dicedb.io/get-started/installation/"
className="inline-flex items-center justify-center gap-2 py-2 p-3 text-base font-medium text-white transition-all duration-300 ease-in-out bg-[#e60000] hover:bg-[#cc0000] rounded-md focus:outline-none focus:ring-2 focus:ring-[#e60000] focus:ring-offset-2 shadow-md hover:shadow-lg"
target="_blank"
rel="noopener noreferrer"
>
<span>Get Started</span>
<ArrowRight className="h-4 w-4" />
</Link>
</nav>
</div>
</header>
);
}
53 changes: 8 additions & 45 deletions apps/playground-web/components/Playground/Playground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,60 +1,23 @@
'use client';

import Image from 'next/image';
import SearchBox from '@/components/Search/SearchBox';
import { TerminalUI } from './TerminalUI';

// utils

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"
>
<Header />

<main
data-testid="playground-main"
className="flex flex-col lg:flex-row gap-10 flex-grow overflow-hidden px-4"
>
<div className="w-full lg:w-7/12 flex flex-col">
<TerminalUI />
<div className="container mx-auto flex flex-col flex-grow min-h-screen bg-white text-gray-900">
<main className="flex flex-col lg:flex-row gap-10 flex-grow overflow-hidden px-4 h-full">
<div className="w-full lg:w-7/12 flex flex-col h-full">
<div className="flex-grow">
<TerminalUI />
</div>
</div>
<div
data-testid="searchbox-container"
className="w-full lg:w-5/12 flex flex-col"
>
<div
data-testid="searchbox-wrapper"
className="flex-grow border border-gray-400 bg-gray-100 p-4 rounded-lg shadow-md mb-4"
>
<div className="w-full lg:w-5/12 flex flex-col h-full">
<div className="flex-grow border border-gray-400 bg-gray-100 rounded-lg shadow-md">
<SearchBox />
</div>
</div>
</main>
</div>
);
}

function Header() {
return (
<header
data-testid="playground-header"
className="navbar flex items-center justify-between py-5"
>
<div className="flex items-center">
<Image
src="/images/dicedb-logo-light.png"
width={110}
height={110}
priority={true}
alt="DiceDB logo"
className="object-contain"
unoptimized
/>
<h2 className="font-light text-2xl ml-2">PlayGround</h2>
</div>
</header>
);
}
4 changes: 1 addition & 3 deletions apps/playground-web/components/Search/CommandPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
'use client';

import { useState } from 'react';
import { Clipboard } from 'lucide-react';
import { DiceCmdMeta } from '@/data/command';
import { useState } from 'react';

interface CommandPageProps extends DiceCmdMeta {
onCopy?: () => void;
Expand Down
53 changes: 28 additions & 25 deletions apps/playground-web/components/Search/SearchBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,32 +16,35 @@ export default function SearchBox() {
);

return (
<div className="w-full max-w-3xl mx-auto" data-testid="search-container">
<div className="mb-4">
<div className="flex items-center bg-gray-200 border border-gray-200 rounded px-2">
<Search className="text-gray-900 mr-2" />
<input
type="text"
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search commands..."
className="bg-transparent border-none outline-none w-full py-2 text-gray-900 font-assistant"
data-testid="search-input"
/>
</div>
<div className="flex flex-col h-full p-4">
<div className="flex items-center bg-gray-200 border border-gray-200 rounded px-2">
<Search className="text-gray-900 mr-2" />
<input
type="text"
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search commands..."
className="bg-transparent border-none outline-none w-full py-2 text-gray-900 font-assistant"
/>
</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 flex-grow overflow-y-auto max-h-[600px] bg-gray-50 rounded-lg">
<div className="space-y-4 p-4">
{search.length > 1 ? (
filteredCommands.map((cmdMeta) => (
<CommandPage
key={cmdMeta.title}
title={cmdMeta.title}
syntax={cmdMeta.syntax}
body={cmdMeta.body}
url={cmdMeta.url}
/>
))
) : (
<div className="flex items-center justify-center md:h-[30rem] ">
Type at least 2 characters to search commands...
</div>
)}
</div>
</div>
</div>
);
Expand Down
9 changes: 4 additions & 5 deletions apps/playground-web/next.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,13 @@ const nextConfig = {
images: {
remotePatterns: [
{
protocol: "https",
hostname: "dicedb.io",
port: "",
pathname: "/**",
protocol: 'https',
hostname: 'dicedb.io',
port: '',
pathname: '/**',
},
],
},
output: "export",
};

export default nextConfig;
Loading
Loading