Fixed links and image src, added margin
This commit is contained in:
Kimberlee Johnson
parent
2903a72c8b
commit
5af991c0cb
|
|
@ -1,6 +1,6 @@
|
|||
# Daily Prebuilt: Next.js demo
|
||||
|
||||
[Clicking create room button starts a call](/public/basic-embed.gif)
|
||||
|
||||
|
||||
## How the demo works
|
||||
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.5 MiB After Width: | Height: | Size: 3.5 MiB |
|
|
@ -1,85 +1,81 @@
|
|||
import React from 'react';
|
||||
|
||||
export const Header = () => {
|
||||
return (
|
||||
<header className="header">
|
||||
<div className="row">
|
||||
<img src="daily-logo.svg" alt="Daily" className="logo" />
|
||||
<div className="capsule">Prebuilt demo</div>
|
||||
export const Header = () => (
|
||||
<header className="header">
|
||||
<div className="row">
|
||||
<img src="daily-logo.svg" alt="Daily" className="logo" />
|
||||
<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">
|
||||
<div className="capsule">
|
||||
<a href="https://docs.daily.co/docs/">API docs</a>
|
||||
</div>
|
||||
<span className="divider"></span>
|
||||
<img
|
||||
src="github-logo.png"
|
||||
alt="Ocotocat"
|
||||
className="logo octocat"
|
||||
href="https://github.com/daily-demos/examples/tree/main/prebuilt-ui/basic-embed"
|
||||
/>
|
||||
</div>
|
||||
<style jsx>{`
|
||||
<span className="divider"></span>
|
||||
<a href="https://github.com/daily-demos/examples/tree/main/prebuilt-ui/basic-embed">
|
||||
<img src="github-logo.png" alt="Ocotocat" className="logo octocat" />
|
||||
</a>
|
||||
</div>
|
||||
<style jsx>{`
|
||||
.header {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
padding: var(--spacing-sm);
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
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;
|
||||
flex: 0 0 auto;
|
||||
padding: var(--spacing-sm);
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
position: fixed;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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: none;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
}
|
||||
`}</style>
|
||||
</header>
|
||||
);
|
||||
|
||||
export default Header;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@ import Header from '../components/Header';
|
|||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
|
||||
<PrebuiltCall />
|
||||
<style jsx>{`
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Reference in New Issue