documentation: add demo updates

deepgram-devs · Mar 20, 2024 · 4e0b98c · 4e0b98c
1 parent 3dfdace
commit 4e0b98c
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 44 deletions.
diff --git a/demo/app/globals.css b/demo/app/globals.css
@@ -2,32 +2,29 @@
 @tailwind components;
 @tailwind utilities;
 
+/**
+ * General stuff
+ */
 :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  background: #0b0b0c;
+  font-size: 16px;
+  color-scheme: dark;
 }
 
-@media (prefers-color-scheme: dark) {
+@media only screen and (min-width: 2000px) {
   :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    font-size: 22px;
   }
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
 @layer utilities {
   .text-balance {
     text-wrap: balance;
   }
+
+  .gradient-shadow {
+    box-shadow:
+      -1rem 0px 2rem 0px #13ef9335,
+      1rem 0px 2rem 0px #149afb35;
+  }
 }
diff --git a/demo/app/layout.tsx b/demo/app/layout.tsx
@@ -17,8 +17,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className={inter.className}>
+    <html lang="en" className="h-dvh">
+      <body className={`h-full dark ${inter.className}`}>
         <NowPlayingContextProvider>{children}</NowPlayingContextProvider>
       </body>
     </html>

diff --git a/demo/app/page.tsx b/demo/app/page.tsx
@@ -1,11 +1,12 @@
 "use client";
 
+import Image from "next/image";
 import { useNowPlaying } from "react-nowplaying";
 
 export default function Home() {
   const { play } = useNowPlaying();
 
-  const playAudio = () => {
+  const playBlobAudio = () => {
     fetch("test.mp3")
       .then((response) => response.blob())
       .then((blob) => {
@@ -14,11 +15,53 @@ export default function Home() {
       .catch((error) => console.error("Error fetching the audio:", error));
   };
 
+  const playUrlAudio = () => {
+    play("/test.mp3", "audio/mp3");
+  };
+
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center p-24">
-      <button type="button" onClick={() => playAudio()}>
-        Play Audio
-      </button>
-    </main>
+    <>
+      <div className="h-full overflow-hidden">
+        {/* height 4rem */}
+        <div className="bg-gradient-to-b from-black/50 to-black/10 backdrop-blur-[2px] h-[4rem] flex items-center">
+          <header className="mx-auto w-full max-w-7xl px-4 md:px-6 lg:px-8 flex items-center justify-between">
+            <div>
+              <a className="flex items-center" href="https://deepgram.com">
+                <Image
+                  className="w-auto h-8 max-w-[12.5rem] sm:max-w-none"
+                  src="/deepgram.svg"
+                  alt="Deepgram Logo"
+                  width={0}
+                  height={0}
+                  priority
+                />
+              </a>
+            </div>
+          </header>
+        </div>
+
+        {/* height 100% minus 4rem */}
+        <main className="mx-auto max-w-7xl px-4 md:px-6 lg:px-8 h-[calc(100%-4rem)] flex justify-center items-center gap-x-8">
+          <span className="gradient-shadow bg-gradient-to-r to-[#13EF93]/50 from-[#149AFB]/80 rounded-lg">
+            <button
+              type="button"
+              className="hidden md:inline-block bg-black text-white rounded-lg m-px px-8 py-2 font-semibold"
+              onClick={() => playBlobAudio()}
+            >
+              Play Blob of Audio
+            </button>
+          </span>
+          <span className="gradient-shadow bg-gradient-to-r to-[#13EF93]/50 from-[#149AFB]/80 rounded-lg">
+            <button
+              type="button"
+              className="hidden md:inline-block bg-black text-white rounded-lg m-px px-8 py-2 font-semibold"
+              onClick={() => playUrlAudio()}
+            >
+              Play URL of Audio
+            </button>
+          </span>
+        </main>
+      </div>
+    </>
   );
 }
diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/demo/package.json b/demo/package.json
@@ -12,7 +12,7 @@
     "next": "14.1.3",
     "react": "^18",
     "react-dom": "^18",
-    "react-nowplaying": "^1.0.1"
+    "react-nowplaying": "^1"
   },
   "devDependencies": {
     "@types/node": "^20",

diff --git a/demo/public/deepgram.svg b/demo/public/deepgram.svg
diff --git a/package-lock.json b/package-lock.json