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,7 +1,6 @@
 import React from 'react';
 
-export const Header = () => {
+export const Header = () => (
-  return (
   <header className="header">
     <div className="row">
       <img src="daily-logo.svg" alt="Daily" className="logo" />
@@ -12,12 +11,9 @@ export const Header = () => {
         <a href="https://docs.daily.co/docs/">API docs</a>
       </div>
       <span className="divider"></span>
-        <img
+      <a href="https://github.com/daily-demos/examples/tree/main/prebuilt-ui/basic-embed">
-          src="github-logo.png"
+        <img src="github-logo.png" alt="Ocotocat" className="logo octocat" />
-          alt="Ocotocat"
+      </a>
-          className="logo octocat"
-          href="https://github.com/daily-demos/examples/tree/main/prebuilt-ui/basic-embed"
-        />
     </div>
     <style jsx>{`
       .header {
@@ -28,6 +24,7 @@ export const Header = () => {
         width: 100%;
         justify-content: space-between;
         position: fixed;
+        top: 0;
       }
 
       .row {
@@ -80,6 +77,5 @@ export const Header = () => {
     `}</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;