Fixed links and image src, added margin

prebuilt-ui/basic-embed/README.md

@@ -1,6 +1,6 @@
 # Daily Prebuilt: Next.js demo 
 
-[Clicking create room button starts a call](/public/basic-embed.gif)
+![Clicking create room button starts a call](./basic-embed.gif)
 
 ## How the demo works 
 

prebuilt-ui/basic-embed/components/Header.js

@@ -1,85 +1,81 @@
 import React from 'react';
 
-export const Header = () => {
+export const Header = () => (
-  return (
+  <header className="header">
-    <header className="header">
+    <div className="row">
-      <div className="row">
+      <img src="daily-logo.svg" alt="Daily" className="logo" />
-        <img src="daily-logo.svg" alt="Daily" className="logo" />
+      <div className="capsule">Prebuilt demo</div>
-        <div className="capsule">Prebuilt demo</div>
+    </div>
+    <div className="row">
+      <div className="capsule">
+        <a href="https://docs.daily.co/docs/">API docs</a>
       </div>
-      <div className="row">
+      <span className="divider"></span>
-        <div className="capsule">
+      <a href="https://github.com/daily-demos/examples/tree/main/prebuilt-ui/basic-embed">
-          <a href="https://docs.daily.co/docs/">API docs</a>
+        <img src="github-logo.png" alt="Ocotocat" className="logo octocat" />
-        </div>
+      </a>
-        <span className="divider"></span>
+    </div>
-        <img
+    <style jsx>{`
-          src="github-logo.png"
+      .header {
-          alt="Ocotocat"
+        display: flex;
-          className="logo octocat"
+        flex: 0 0 auto;
-          href="https://github.com/daily-demos/examples/tree/main/prebuilt-ui/basic-embed"
+        padding: var(--spacing-sm);
-        />
+        align-items: center;
-      </div>
+        width: 100%;
-      <style jsx>{`
+        justify-content: space-between;
+        position: fixed;
+        top: 0;
+      }
+
+      .row {
+        display: flex;
+        align-items: center;
+      }
+
+      .logo {
+        margin-right: var(--spacing-xs);
+      }
+
+      .octocat {
+        width: 24px;
+        height: 24px;
+        margin-left: var(--spacing-xxs);
+      }
+
+      .capsule {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-xxxs);
+        background-color: var(--blue-dark);
+        border-radius: var(--radius-sm);
+        padding: var(--spacing-xxs) var(--spacing-xs);
+        box-sizing: border-box;
+        line-height: 1;
+        font-weight: var(--weight-medium);
+        user-select: none;
+        margin-right: var(--spacing-xxs);
+        color: var(--text-reverse);
+      }
+
+      .capsule a {
+        text-decoration: none;
+        color: var(--text-reverse);
+      }
+
+      .divider {
+        background: var(--gray-light);
+        margin: 0 var(--spacing-xxs);
+        height: 32px;
+        width: 1px;
+      }
+
+      @media only screen and (max-width: 750px) {
         .header {
-          display: flex;
+          display: none;
-          flex: 0 0 auto;
-          padding: var(--spacing-sm);
-          align-items: center;
-          width: 100%;
-          justify-content: space-between;
-          position: fixed;
         }
-
+      }
-        .row {
+    `}</style>
-          display: flex;
+  </header>
-          align-items: center;
+);
-        }
-
-        .logo {
-          margin-right: var(--spacing-xs);
-        }
-
-        .octocat {
-          width: 24px;
-          height: 24px;
-          margin-left: var(--spacing-xxs);
-        }
-
-        .capsule {
-          display: flex;
-          align-items: center;
-          gap: var(--spacing-xxxs);
-          background-color: var(--blue-dark);
-          border-radius: var(--radius-sm);
-          padding: var(--spacing-xxs) var(--spacing-xs);
-          box-sizing: border-box;
-          line-height: 1;
-          font-weight: var(--weight-medium);
-          user-select: none;
-          margin-right: var(--spacing-xxs);
-          color: var(--text-reverse);
-        }
-
-        .capsule a {
-          text-decoration: none;
-          color: var(--text-reverse);
-        }
-
-        .divider {
-          background: var(--gray-light);
-          margin: 0 var(--spacing-xxs);
-          height: 32px;
-          width: 1px;
-        }
-
-        @media only screen and (max-width: 750px) {
-          .header {
-            display: none;
-          }
-        }
-      `}</style>
-    </header>
-  );
-};
 
 export default Header;

prebuilt-ui/basic-embed/components/PrebuiltCall.js

@@ -17,8 +17,10 @@ import {
 import Field from '@dailyjs/shared/components/Field';
 import { TextInput } from '@dailyjs/shared/components/Input';
 import { Well } from '@dailyjs/shared/components/Well';
+import getDemoProps from '@dailyjs/shared/lib/demoProps';
+import { Header } from '../components/Header';
 
-export const PrebuiltCall = () => {
+export default function PrebuiltCall() {
   const [demoState, setDemoState] = useState('home');
   const [isError, setIsError] = useState(false);
   const [roomURL, setRoomURL] = useState('');
@@ -139,18 +141,18 @@ export const PrebuiltCall = () => {
         return (
           <Card>
             <CardHeader>
-              Start demo with a new unique room or paste in your own room URL.
+              Start demo with a new unique room, or paste in your own room URL.
             </CardHeader>
             <CardBody>
               {isError && (
                 <Well variant="error">
-                  Failed to obtain token <p>{error}</p>
+                  Error creating the room. Please try again.
                 </Well>
               )}
               <Button onClick={() => createRoom()} disabled={roomValidity}>
                 Create room and start
               </Button>
-              <Field label="Or enter room to join">
+              <Field label="Or enter room to join" className="roomField">
                 <TextInput
                   ref={roomURLRef}
                   type="text"
@@ -204,6 +206,7 @@ export const PrebuiltCall = () => {
 
   return (
     <div className="container">
+      <Header />
       {content}
       <style jsx>{`
         .container {
@@ -227,6 +230,14 @@ export const PrebuiltCall = () => {
           color: var(--blue-dark);
         }
 
+        :global(.field) {
+          margin-top: var(--spacing-sm);
+        }
+
+        :global(.card) {
+          margin: 8px;
+        }
+
         @media only screen and (max-width: 750px) {
           .container {
             flex-direction: column;
@@ -235,6 +246,12 @@ export const PrebuiltCall = () => {
       `}</style>
     </div>
   );
-};
+}
 
-export default PrebuiltCall;
+export async function getStaticProps() {
+  const defaultProps = getDemoProps();
+
+  return {
+    props: defaultProps,
+  };
+}

prebuilt-ui/basic-embed/pages/index.js

@@ -4,8 +4,6 @@ import Header from '../components/Header';
 export default function Home() {
   return (
     <>
-      <Header />
-
       <PrebuiltCall />
       <style jsx>{`
         display: flex;