Add "Submit Issue on GitHub" Button in Playground Header

.github/ISSUE_TEMPLATE/report_bug.md

@@ -0,0 +1,30 @@
+---
+name: Bug in DiceDB Playground
+about: Report a bug in the DiceDB Playground
+title: '<Describe the bug in one concise line>'
+labels: ''
+assignees: ''
+---
+
+## Bug Category
+
+- [ ] UI
+- [ ] Backend
+
+## Steps to Reproduce
+
+```
+{steps_to_reproduce}
+```
+
+## Expected Behavior
+
+```
+<!-- Describe what should happen -->
+```
+
+## Actual Behavior
+
+```
+<!-- Describe what actually happens -->
+```

apps/playground-web/components/Footer/Footer.tsx

@@ -1,152 +1,7 @@
 'use client';
 
 import React from 'react';
-import { Twitter } from '@mui/icons-material';
-import GitHub from '@mui/icons-material/GitHub';
-import People from '@mui/icons-material/People';
-import { Button } from '@dicedb/ui/button';
-import Link from 'next/link';
 
 export default function Footer() {
-  return (
-    <footer
-      className="bg-white border-t border-gray-100 py-12"
-      data-testid="footer"
-    >
-      <div className="container mx-auto px-4">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
-          <div>
-            <h3
-              className="text-gray-500 font-semibold mb-4 text-center"
-              data-testid="footer-heading"
-            >
-              DiceDB
-            </h3>
-            <Link
-              href="https://dicedb.io/get-started/installation/"
-              target="_blank"
-              data-testid="get-started-link"
-            >
-              <Button
-                className="w-full !bg-red-600 hover:!bg-red-700 !text-white"
-                data-testid="get-started-button"
-              >
-                Get Started →
-              </Button>
-            </Link>
-            <Link
-              href="https://github.com/dicedb/dice"
-              target="_blank"
-              data-testid="github-link"
-            >
-              <Button
-                variant="outline"
-                className="!w-full mt-2 !border-1 !border-gray-700 bg-blue-50 hover:text-blue text-black hover:text-blue-600"
-                data-testid="github-button"
-              >
-                <GitHub className="mr-2 h-4 w-4" /> GitHub (4k+)
-              </Button>
-            </Link>
-          </div>
-
-          <div className="text-center">
-            <h3 className="text-gray-500 font-semibold mb-4">Developers</h3>
-            <ul className="space-y-2">
-              <li>
-                <a
-                  href="https://dicedb.io/get-started/installation"
-                  target="_blank"
-                  className="text-gray-600 hover:text-gray-900"
-                  data-testid="quickstart-link"
-                >
-                  Quickstart
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://dicedb.io/commands/get"
-                  target="_blank"
-                  className="text-gray-600 hover:text-gray-900"
-                  data-testid="commands-link"
-                >
-                  Commands
-                </a>
-              </li>
-              <li>
-                <a
-                  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>
-              </li>
-            </ul>
-          </div>
-
-          <div className="text-center">
-            <h3 className="text-gray-500 font-semibold mb-4">Examples</h3>
-            <ul className="space-y-2">
-              <li>
-                <a
-                  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>
-              </li>
-            </ul>
-          </div>
-
-          <div className="text-center">
-            <h3 className="text-gray-500 font-semibold mb-4">Us and Socials</h3>
-            <ul className="space-y-2">
-              <li>
-                <a
-                  href="mailto:[email protected]"
-                  target="_blank"
-                  className="text-gray-600 hover:text-gray-900"
-                  data-testid="contact-link"
-                >
-                  Contact Us
-                </a>
-              </li>
-            </ul>
-            <div className="space-x-4 mt-4 items-center justify-items-center">
-              <a
-                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
-                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
-                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>
-            </div>
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
+  return <footer data-testid="footer"></footer>;
 }

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

@@ -3,6 +3,9 @@
 import Image from 'next/image';
 import SearchBox from '@/components/Search/SearchBox';
 import { TerminalUI } from './TerminalUI';
+import Link from 'next/link';
+import { Button } from '@dicedb/ui/button';
+import GitHub from '@mui/icons-material/GitHub';
 
 // utils
 
@@ -44,17 +47,41 @@ function 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
-        />
+        <Link
+          href="https://dicedb.io"
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="DiceDB web URL"
+          data-testid="dicedb-url-link"
+        >
+          <Image
+            src="/images/dicedb-logo-light.png"
+            width={110}
+            height={110}
+            priority={true}
+            alt="DiceDB logo"
+            className="object-contain"
+            unoptimized
+          />
+        </Link>
         <h2 className="font-light text-2xl ml-2">PlayGround</h2>
       </div>
+      <Link
+        href="https://github.com/DiceDB/playground-mono/issues/new"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="Submit an issue or feedback"
+        data-testid="submit-issue-link"
+      >
+        <Button
+          variant="outline"
+          className="!w-full mt-2 !border-1 !border-gray-700 bg-blue-50 hover:text-blue text-black hover:text-blue-600 flex items-center justify-center rounded-lg"
+          data-testid="submit-issue-button"
+        >
+          Submit an Issue
+          <GitHub className="ml-2 h-4 w-4" />
+        </Button>
+      </Link>
     </header>
   );
 }