82 lines
1.9 KiB
JavaScript
82 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
|
|
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>
|
|
<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: none;
|
|
}
|
|
}
|
|
`}</style>
|
|
</header>
|
|
);
|
|
|
|
export default Header;
|