Copy to Clipboard
/* @flow */
import React from 'react'
import { Background, Body, Caption, Card, Flex, FlexItem, Icon, Image, Layout, ProgressSimple, SectionSeparator, Table, TableRow, TextInput, Title, User } from 'playbook-ui'
const yourLibraryLinks = ['Made For You', 'Recently Played', 'Liked Songs', 'Albums', 'Artists', 'Podcasts']
const playlists = ['podcasts', 'THENX', 'Adrenaline Workout', 'New Music Friday', 'RetroWave / Outrun', 'Tiki Torch']
const randomImageUrl = (id) => `https://picsum.photos/id/${id}/175`
const playlistCardSubtext = 'A daily show for anyone who works a regular job and wants to start an income-earning pr...'
const playlistCardTitles = ['Side Hustle School', 'The Devslopes Podcast with Mark Wahlbeck', 'Borrasca',
'Philosophize This!', 'How I Built This With Guy Raz']
const SmallIconPadded = ({ icon, ...rest }: any) => (
<Icon
dark
icon={icon}
marginX="sm"
{...rest}
/>
)
const BottomRightIcon = ({ icon }: any) => (
<Body
dark
paddingRight="sm"
>
<Icon
dark
icon={icon}
/>
</Body>
)
const MusicApp = () => {
window.addEventListener('DOMContentLoaded', () => {
const fullHeightElems = document.querySelectorAll('.fullHeight')
fullHeightElems.forEach((elem) => elem.style.height = '100%')
})
return (
<Background
backgroundColor="dark"
padding="none"
>
<Flex
orientation="column"
vertical="stretch"
>
<FlexItem grow>
<Layout
collapse="lg"
dark
position="left"
size="sm"
>
<Layout.Side>
{/**--------------------- Sidebar start --------------------- */}
<Flex
className="fullHeight"
orientation="column"
spacing="between"
vertical="stretch"
>
<Flex
paddingRight="sm"
spacing="between"
wrap
>
<div>
<Table
container={false}
dark
disableHover
marginTop="md"
responsive="none"
size="sm"
>
<tbody>
<TableRow
dark
sideHighlightColor="category_2"
>
<td>
<Body dark>
<Icon
dark
icon="home"
marginRight="xs"
/>
{'Home'}
</Body>
</td>
</TableRow>
<tr>
<td>
<Body dark>
<Icon
dark
icon="music"
marginRight="xs"
/>
{'Browse'}
</Body>
</td>
</tr>
<tr>
<td>
<Body dark>
<Icon
dark
icon="radio"
marginRight="xs"
/>
{'Radio'}
</Body>
</td>
</tr>
</tbody>
</Table>
</div>
<div>
<Caption
paddingLeft="lg"
paddingTop="lg"
>
{'Your Library'}
</Caption>
{
yourLibraryLinks.map((linkText, index) => (
<Body
color="lighter"
dark
key={index}
padding="none"
paddingBottom="xs"
paddingLeft="lg"
>
{linkText}
</Body>
))
}
</div>
<div>
<Caption
paddingLeft="lg"
paddingTop="lg"
>
{'Playlists'}
</Caption>
{
playlists.map((linkText, index) => (
<Body
color="lighter"
dark
key={index}
padding="none"
paddingBottom="xs"
paddingLeft="lg"
>
{linkText}
</Body>
))
}
</div>
</Flex>
<FlexItem grow />
<div>
<SectionSeparator dark />
<Body
dark
paddingY="sm"
>
<Icon
dark
icon="plus-circle"
marginLeft="lg"
marginRight="xs"
/>
{'New Playlist'}
</Body>
<SectionSeparator dark />
</div>
</Flex>
{/**--------------------- End of sidebar--------------------- */}
</Layout.Side>
<Layout.Body>
<Flex
className="fullHeight"
orientation="column"
vertical="stretch"
>
{/**---------------------- Start Header ---------------------- */}
<Flex
dark
paddingLeft="lg"
paddingY="xs"
vertical="center"
>
<Body
color="lighter"
dark
>
<Icon
dark
icon="chevron-left"
marginX="lg"
padding="none"
size="1x"
/>
</Body>
<Body dark>
<Icon
dark
icon="chevron-right"
marginRight="lg"
padding="none"
size="1x"
/>
</Body>
<TextInput
dark
placeholder="Search"
/>
<FlexItem grow />
<User
align="left"
avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
dark
name="Maria Illescas"
orientation="horizontal"
paddingRight="sm"
/>
<Body dark>
<Icon
dark
icon="chevron-down"
marginRight="sm"
padding="none"
size="1x"
/>
</Body>
</Flex>
{/**---------------------- End of Header---------------------- */}
<FlexItem grow>
{/**---------------------- Start Body ---------------------- */}
<Card
dark
padding="none"
paddingBottom="xs"
>
<Flex
marginX="lg"
orientation="column"
paddingTop="lg"
paddingX="xl"
vertical="stretch"
>
<Title
dark
marginBottom="sm"
size={1}
text="Home"
/>
<Title
dark
size={4}
text="Your top podcasts"
/>
<SectionSeparator dark />
<Flex
paddingTop="sm"
wrap
>
{
playlistCardTitles.map((title, i) => (
<FlexItem
fixedSize="175px"
key={i}
paddingRight="sm"
>
<Image url={randomImageUrl(Math.floor(1000 * Math.random()))} />
<Caption dark>{title}</Caption>
<Caption
dark
size="xs"
>
{playlistCardSubtext}
</Caption>
</FlexItem>
))
}
</Flex>
<Flex
spacing="between"
vertical="bottom"
>
<div>
<Title
dark
paddingTop="sm"
size={4}
text="Made for you"
/>
<Caption
dark
size="xs"
text="Get better recommendations the more you listen."
/>
</div>
<div>
<Flex paddingBottom="xs">
<Body
color="lighter"
dark
>
<Icon
dark
icon="chevron-left"
marginRight="sm"
padding="none"
size="1x"
/>
</Body>
<Body dark>
<Icon
dark
icon="chevron-right"
padding="none"
size="1x"
/>
</Body>
</Flex>
</div>
</Flex>
<SectionSeparator dark />
<Flex
paddingTop="sm"
wrap
>
{
[...Array(6)].map((_, i) => (
<FlexItem
fixedSize="175px"
key={i}
paddingRight="sm"
>
<Image url={randomImageUrl(Math.floor(1000 * Math.random()))} />
<Caption dark>{`Daily Mix ${ i + 1 }`}</Caption>
<Caption
dark
size="xs"
>
{playlistCardSubtext}
</Caption>
</FlexItem>
))
}
</Flex>
</Flex>
</Card>
{/**---------------------- End of Body ---------------------- */}
</FlexItem>
</Flex>
</Layout.Body>
</Layout>
</FlexItem>
{/**---------------------- Start Footer ---------------------- */}
<Background
backgroundColor="dark"
padding="none"
>
<Flex
horizontal="center"
padding="xs"
vertical="stretch"
wrap
>
<FlexItem
fixedSize="22%"
grow
>
<Flex
vertical="center"
>
<Image
marginLeft="xs"
url={randomImageUrl(Math.floor(1000 * Math.random()))}
/>
<Body
dark
paddingLeft="sm"
>
<Title
dark
size={4}
>
{'Change Will Come'}
<Icon
dark
icon="heart"
marginLeft="xs"
/>
</Title>
<Caption
dark
size="xs"
text="Cut Snake"
/>
</Body>
</Flex>
</FlexItem>
<FlexItem
fixedSize="56%"
grow
marginTop="xs"
>
<Flex
horizontal="center"
orientation="column"
vertical="stretch"
>
<Body
dark
marginBottom="xs"
>
<Flex
horizontal="center"
vertical="center"
>
<SmallIconPadded icon="random" />
<SmallIconPadded icon="step-backward" />
<SmallIconPadded
icon="play-circle"
size="2x"
/>
<SmallIconPadded icon="step-forward" />
<SmallIconPadded icon="repeat" />
</Flex>
</Body>
<Flex
horizontal="center"
vertical="center"
>
<Body
dark
marginRight="sm"
text="2:00"
/>
<FlexItem grow>
<ProgressSimple
muted
percent={20}
/>
</FlexItem>
<Body
dark
marginLeft="sm"
text="10:00"
/>
</Flex>
</Flex>
</FlexItem>
<FlexItem
fixedSize="22%"
grow
>
<Flex
className="fullHeight"
horizontal="right"
vertical="center"
>
<BottomRightIcon icon="list-music" />
<BottomRightIcon icon="computer-speaker" />
<BottomRightIcon icon="volume" />
<FlexItem fixedSize="100px">
<ProgressSimple
muted
paddingRight="md"
percent={30}
/>
</FlexItem>
<BottomRightIcon icon="expand-alt" />
</Flex>
</FlexItem>
</Flex>
</Background>
{/**---------------------- End of Footer ---------------------- */}
</Flex>
</Background>
)
}
export default MusicApp
/* @flow */
import React from 'react'
import { Background, Body, Caption, Card, Flex, FlexItem, Icon, Image, Layout, ProgressSimple, SectionSeparator, Table, TableRow, TextInput, Title, User } from 'playbook-ui'
const yourLibraryLinks = ['Made For You', 'Recently Played', 'Liked Songs', 'Albums', 'Artists', 'Podcasts']
const playlists = ['podcasts', 'THENX', 'Adrenaline Workout', 'New Music Friday', 'RetroWave / Outrun', 'Tiki Torch']
const randomImageUrl = (id) => `https://picsum.photos/id/${id}/175`
const playlistCardSubtext = 'A daily show for anyone who works a regular job and wants to start an income-earning pr...'
const playlistCardTitles = ['Side Hustle School', 'The Devslopes Podcast with Mark Wahlbeck', 'Borrasca',
'Philosophize This!', 'How I Built This With Guy Raz']
const SmallIconPadded = ({ icon, ...rest }: any) => (
<Icon
dark
icon={icon}
marginX="sm"
{...rest}
/>
)
const BottomRightIcon = ({ icon }: any) => (
<Body
dark
paddingRight="sm"
>
<Icon
dark
icon={icon}
/>
</Body>
)
const MusicApp = () => {
window.addEventListener('DOMContentLoaded', () => {
const fullHeightElems = document.querySelectorAll('.fullHeight')
fullHeightElems.forEach((elem) => elem.style.height = '100%')
})
return (
<Background
backgroundColor="dark"
padding="none"
>
<Flex
orientation="column"
vertical="stretch"
>
<FlexItem grow>
<Layout
collapse="lg"
dark
position="left"
size="sm"
>
<Layout.Side>
{/**--------------------- Sidebar start --------------------- */}
<Flex
className="fullHeight"
orientation="column"
spacing="between"
vertical="stretch"
>
<Flex
paddingRight="sm"
spacing="between"
wrap
>
<div>
<Table
container={false}
dark
disableHover
marginTop="md"
responsive="none"
size="sm"
>
<tbody>
<TableRow
dark
sideHighlightColor="category_2"
>
<td>
<Body dark>
<Icon
dark
icon="home"
marginRight="xs"
/>
{'Home'}
</Body>
</td>
</TableRow>
<tr>
<td>
<Body dark>
<Icon
dark
icon="music"
marginRight="xs"
/>
{'Browse'}
</Body>
</td>
</tr>
<tr>
<td>
<Body dark>
<Icon
dark
icon="radio"
marginRight="xs"
/>
{'Radio'}
</Body>
</td>
</tr>
</tbody>
</Table>
</div>
<div>
<Caption
paddingLeft="lg"
paddingTop="lg"
>
{'Your Library'}
</Caption>
{
yourLibraryLinks.map((linkText, index) => (
<Body
color="lighter"
dark
key={index}
padding="none"
paddingBottom="xs"
paddingLeft="lg"
>
{linkText}
</Body>
))
}
</div>
<div>
<Caption
paddingLeft="lg"
paddingTop="lg"
>
{'Playlists'}
</Caption>
{
playlists.map((linkText, index) => (
<Body
color="lighter"
dark
key={index}
padding="none"
paddingBottom="xs"
paddingLeft="lg"
>
{linkText}
</Body>
))
}
</div>
</Flex>
<FlexItem grow />
<div>
<SectionSeparator dark />
<Body
dark
paddingY="sm"
>
<Icon
dark
icon="plus-circle"
marginLeft="lg"
marginRight="xs"
/>
{'New Playlist'}
</Body>
<SectionSeparator dark />
</div>
</Flex>
{/**--------------------- End of sidebar--------------------- */}
</Layout.Side>
<Layout.Body>
<Flex
className="fullHeight"
orientation="column"
vertical="stretch"
>
{/**---------------------- Start Header ---------------------- */}
<Flex
dark
paddingLeft="lg"
paddingY="xs"
vertical="center"
>
<Body
color="lighter"
dark
>
<Icon
dark
icon="chevron-left"
marginX="lg"
padding="none"
size="1x"
/>
</Body>
<Body dark>
<Icon
dark
icon="chevron-right"
marginRight="lg"
padding="none"
size="1x"
/>
</Body>
<TextInput
dark
placeholder="Search"
/>
<FlexItem grow />
<User
align="left"
avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
dark
name="Maria Illescas"
orientation="horizontal"
paddingRight="sm"
/>
<Body dark>
<Icon
dark
icon="chevron-down"
marginRight="sm"
padding="none"
size="1x"
/>
</Body>
</Flex>
{/**---------------------- End of Header---------------------- */}
<FlexItem grow>
{/**---------------------- Start Body ---------------------- */}
<Card
dark
padding="none"
paddingBottom="xs"
>
<Flex
marginX="lg"
orientation="column"
paddingTop="lg"
paddingX="xl"
vertical="stretch"
>
<Title
dark
marginBottom="sm"
size={1}
text="Home"
/>
<Title
dark
size={4}
text="Your top podcasts"
/>
<SectionSeparator dark />
<Flex
paddingTop="sm"
wrap
>
{
playlistCardTitles.map((title, i) => (
<FlexItem
fixedSize="175px"
key={i}
paddingRight="sm"
>
<Image url={randomImageUrl(Math.floor(1000 * Math.random()))} />
<Caption dark>{title}</Caption>
<Caption
dark
size="xs"
>
{playlistCardSubtext}
</Caption>
</FlexItem>
))
}
</Flex>
<Flex
spacing="between"
vertical="bottom"
>
<div>
<Title
dark
paddingTop="sm"
size={4}
text="Made for you"
/>
<Caption
dark
size="xs"
text="Get better recommendations the more you listen."
/>
</div>
<div>
<Flex paddingBottom="xs">
<Body
color="lighter"
dark
>
<Icon
dark
icon="chevron-left"
marginRight="sm"
padding="none"
size="1x"
/>
</Body>
<Body dark>
<Icon
dark
icon="chevron-right"
padding="none"
size="1x"
/>
</Body>
</Flex>
</div>
</Flex>
<SectionSeparator dark />
<Flex
paddingTop="sm"
wrap
>
{
[...Array(6)].map((_, i) => (
<FlexItem
fixedSize="175px"
key={i}
paddingRight="sm"
>
<Image url={randomImageUrl(Math.floor(1000 * Math.random()))} />
<Caption dark>{`Daily Mix ${ i + 1 }`}</Caption>
<Caption
dark
size="xs"
>
{playlistCardSubtext}
</Caption>
</FlexItem>
))
}
</Flex>
</Flex>
</Card>
{/**---------------------- End of Body ---------------------- */}
</FlexItem>
</Flex>
</Layout.Body>
</Layout>
</FlexItem>
{/**---------------------- Start Footer ---------------------- */}
<Background
backgroundColor="dark"
padding="none"
>
<Flex
horizontal="center"
padding="xs"
vertical="stretch"
wrap
>
<FlexItem
fixedSize="22%"
grow
>
<Flex
vertical="center"
>
<Image
marginLeft="xs"
url={randomImageUrl(Math.floor(1000 * Math.random()))}
/>
<Body
dark
paddingLeft="sm"
>
<Title
dark
size={4}
>
{'Change Will Come'}
<Icon
dark
icon="heart"
marginLeft="xs"
/>
</Title>
<Caption
dark
size="xs"
text="Cut Snake"
/>
</Body>
</Flex>
</FlexItem>
<FlexItem
fixedSize="56%"
grow
marginTop="xs"
>
<Flex
horizontal="center"
orientation="column"
vertical="stretch"
>
<Body
dark
marginBottom="xs"
>
<Flex
horizontal="center"
vertical="center"
>
<SmallIconPadded icon="random" />
<SmallIconPadded icon="step-backward" />
<SmallIconPadded
icon="play-circle"
size="2x"
/>
<SmallIconPadded icon="step-forward" />
<SmallIconPadded icon="repeat" />
</Flex>
</Body>
<Flex
horizontal="center"
vertical="center"
>
<Body
dark
marginRight="sm"
text="2:00"
/>
<FlexItem grow>
<ProgressSimple
muted
percent={20}
/>
</FlexItem>
<Body
dark
marginLeft="sm"
text="10:00"
/>
</Flex>
</Flex>
</FlexItem>
<FlexItem
fixedSize="22%"
grow
>
<Flex
className="fullHeight"
horizontal="right"
vertical="center"
>
<BottomRightIcon icon="list-music" />
<BottomRightIcon icon="computer-speaker" />
<BottomRightIcon icon="volume" />
<FlexItem fixedSize="100px">
<ProgressSimple
muted
paddingRight="md"
percent={30}
/>
</FlexItem>
<BottomRightIcon icon="expand-alt" />
</Flex>
</FlexItem>
</Flex>
</Background>
{/**---------------------- End of Footer ---------------------- */}
</Flex>
</Background>
)
}
export default MusicApp