Copy to Clipboard
import React from 'react'
import { Background, Body, Button, Card, Flex, FlexItem, Icon, IconValue, Legend, MultipleUsers, Nav, NavItem, SectionSeparator, Title } from 'playbook-ui'
const TrendingRepositories = () => {
window.addEventListener('DOMContentLoaded', () => {
const mobileView = document.querySelector('.nav-bar-header-mobile')
const desktopView = document.querySelector('.nav-bar-header-desktop')
const cardBody = document.querySelector('.card_body_marg')
const viewSize = () => {
if (window.innerWidth < 415){
mobileView.style.display = 'block'
desktopView.style.display = 'none'
cardBody.style.cssText = 'margin:8px!important;'
} else {
mobileView.style.display = 'none'
desktopView.style.display = 'block'
cardBody.style.cssText = 'margin:40px!important;'
}
}
viewSize()
window.addEventListener('resize', () => {
viewSize()
})
})
return (
<div>
<div
className="nav-bar-header-desktop"
style={{ display: 'none' }}
>
<Background
backgroundColor="white"
paddingBottom="none"
paddingTop="md"
>
<Flex
paddingLeft="xl"
paddingRight="md"
spacing="between"
>
<FlexItem>
<Nav
link="#"
marginLeft="sm"
orientation="horizontal"
>
<NavItem
link="#"
text="Explore"
/>
<NavItem
link="#"
text="Topics"
/>
<NavItem
active
link="#"
text="Trending"
/>
<NavItem
link="#"
text="Collections"
/>
<NavItem
link="#"
text="Events"
/>
<NavItem
link="#"
text="Sponsors"
/>
</Nav>
</FlexItem>
<FlexItem>
<Button
marginRight="lg"
onClick={() => alert('button clicked!')}
text="Get email updates"
/>
</FlexItem>
</Flex>
</Background>
<SectionSeparator />
</div>
<div
className="nav-bar-header-mobile"
style={{ display: 'none' }}
>
<Background
backgroundColor="white"
paddingBottom="none"
paddingTop="md"
>
<Flex
paddingLeft="lg"
paddingRight="md"
spacing="between"
>
<FlexItem>
<Nav
link="#"
marginLeft="none"
orientation="horizontal"
>
<NavItem
link="#"
text="Explore"
/>
<NavItem
active
link="#"
text="Trending"
/>
</Nav>
</FlexItem>
</Flex>
</Background>
<SectionSeparator />
</div>
<div className="trending-section">
<Flex
orientation="column"
padding="xl"
vertical="center"
>
<FlexItem>
<Title
size={1}
tag="h1"
text="Trending"
/>
</FlexItem>
<FlexItem>
<Body
color="light"
text="See what the kodemonkey community is most excited about today."
/>
</FlexItem>
</Flex>
<SectionSeparator />
</div>
<div className="cards-body">
<Background
backgroundColor="white"
padding="sm"
>
<Card
className="card_body_marg"
margin="xl"
padding="none"
>
<Background
backgroundColor="light"
>
<Flex
spacing="between"
wrap
>
<FlexItem>
<Nav
link="#"
orientation="horizontal"
>
<NavItem
active
link="#"
text="Repositories"
/>
<NavItem
link="#"
text="Developers"
/>
</Nav>
</FlexItem>
<div className="p_sm">
<FlexItem>
<Flex
horizontal="right"
spacing="evenly"
wrap
>
<FlexItem
paddingRight="lg"
>
{'Spoken Language: '}
<Title
size={4}
tag="span"
text="Any "
/>
<span>▾</span>
</FlexItem>
<FlexItem
paddingRight="lg"
>
{'Language: '}
<Title
size={4}
tag="span"
text="Any "
/>
<span>▾</span>
</FlexItem>
<FlexItem
padding="none"
>
{'Date Range: '}
<Title
size={4}
tag="span"
text="Today "
/>
<span>▾</span>
</FlexItem>
</Flex>
</FlexItem>
</div>
</Flex>
</Background>
<SectionSeparator />
<div className="p_sm">
<Flex
orientation="column"
vertical="stretch"
>
<Flex
spacing="between"
>
<FlexItem>
<h3>
<Icon
fixedWidth
icon="book"
paddingRight="xs"
/>
<a>{'themsaid / ibis'}</a>
</h3>
</FlexItem>
<FlexItem>
<Button
icon="star"
text="Star"
variant="secondary"
/>
</FlexItem>
</Flex>
<FlexItem
paddingBottom="xs"
>
{'A PHP tool that helps you write eBooks in markdown and convert to PDF.'}
</FlexItem>
<Flex
spacing="between"
>
<FlexItem>
<FlexItem>
<Flex
wrap
>
<FlexItem>
<Legend
color="data_1"
paddingRight="xs"
text="HTML"
/>
</FlexItem>
<FlexItem>
<IconValue
icon="star"
paddingRight="sm"
text="2,278"
/>
</FlexItem>
<FlexItem>
<IconValue
icon="bezier-curve"
paddingRight="sm"
text="1,366"
/>
</FlexItem>
<FlexItem>
<Flex>
<FlexItem>
<Body
color="light"
paddingRight="sm"
text="Built by"
/>
</FlexItem>
<FlexItem>
<MultipleUsers
users={[
{
name: 'Patrick Welch',
imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
},
{
name: 'Lucille Sanchez',
imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
},
{
name: 'Beverly Reyes',
imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
},
{
name: 'Keith Craig',
imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
},
{
name: 'Alicia Cooper',
imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
},
]}
/>
</FlexItem>
</Flex>
</FlexItem>
</Flex>
</FlexItem>
</FlexItem>
<FlexItem>
<IconValue
icon="star"
text="402 stars today"
/>
</FlexItem>
</Flex>
</Flex>
</div>
<SectionSeparator />
<div className="p_sm">
<Flex
orientation="column"
vertical="stretch"
>
<Flex
spacing="between"
>
<FlexItem>
<h3>
<Icon
fixedWidth
icon="book"
paddingRight="xs"
/>
<a>{'l1ving / youtube-dl'}</a>
</h3>
</FlexItem>
<FlexItem>
<Button
icon="star"
text="Star"
variant="secondary"
/>
</FlexItem>
</Flex>
<FlexItem
paddingBottom="xs"
>
{'A fork of youtube-dl, for archival purposes.'}
</FlexItem>
<Flex
spacing="between"
>
<FlexItem>
<FlexItem>
<Flex
wrap
>
<FlexItem>
<Legend
color="data_2"
paddingRight="xs"
text="Python"
/>
</FlexItem>
<FlexItem>
<IconValue
icon="star"
paddingRight="sm"
text="2,278"
/>
</FlexItem>
<FlexItem>
<IconValue
icon="bezier-curve"
paddingRight="sm"
text="1,366"
/>
</FlexItem>
<FlexItem>
<Flex>
<FlexItem>
<Body
color="light"
paddingRight="sm"
text="Built by"
/>
</FlexItem>
<FlexItem>
<MultipleUsers
users={[
{
name: 'Patrick Welch',
imageUrl: 'https://randomuser.me/api/portraits/men/12.jpg',
},
{
name: 'Lucille Sanchez',
imageUrl: 'https://randomuser.me/api/portraits/women/15.jpg',
},
{
name: 'Beverly Reyes',
imageUrl: 'https://randomuser.me/api/portraits/women/17.jpg',
},
{
name: 'Keith Craig',
imageUrl: 'https://randomuser.me/api/portraits/men/18.jpg',
},
{
name: 'Alicia Cooper',
imageUrl: 'https://randomuser.me/api/portraits/women/19.jpg',
},
]}
/>
</FlexItem>
</Flex>
</FlexItem>
</Flex>
</FlexItem>
</FlexItem>
<FlexItem>
<IconValue
icon="star"
text="172 stars today"
/>
</FlexItem>
</Flex>
</Flex>
</div>
<SectionSeparator />
<div className="p_sm">
<Flex
orientation="column"
vertical="stretch"
>
<Flex
spacing="between"
>
<FlexItem>
<h3>
<Icon
fixedWidth
icon="book"
paddingRight="xs"
/>
<a>{'apache / incubator-nuttx'}</a>
</h3>
</FlexItem>
<FlexItem>
<Button
icon="star"
text="Star"
variant="secondary"
/>
</FlexItem>
</Flex>
<FlexItem
paddingBottom="xs"
>
{'Apache NuttX is a mature, real-time embedded operating system (RTOS).'}
</FlexItem>
<Flex
spacing="between"
>
<FlexItem>
<FlexItem>
<Flex
wrap
>
<FlexItem>
<Legend
color="data_3"
paddingRight="xs"
text="C"
/>
</FlexItem>
<FlexItem>
<IconValue
icon="star"
paddingRight="sm"
text="2,278"
/>
</FlexItem>
<FlexItem>
<IconValue
icon="bezier-curve"
paddingRight="sm"
text="1,366"
/>
</FlexItem>
<FlexItem>
<Flex>
<FlexItem>
<Body
color="light"
paddingRight="sm"
text="Built by"
/>
</FlexItem>
<FlexItem>
<MultipleUsers
users={[
{
name: 'Patrick Welch',
imageUrl: 'https://randomuser.me/api/portraits/men/20.jpg',
},
{
name: 'Lucille Sanchez',
imageUrl: 'https://randomuser.me/api/portraits/women/22.jpg',
},
{
name: 'Beverly Reyes',
imageUrl: 'https://randomuser.me/api/portraits/women/23.jpg',
},
{
name: 'Keith Craig',
imageUrl: 'https://randomuser.me/api/portraits/men/24.jpg',
},
{
name: 'Alicia Cooper',
imageUrl: 'https://randomuser.me/api/portraits/women/29.jpg',
},
]}
/>
</FlexItem>
</Flex>
</FlexItem>
</Flex>
</FlexItem>
</FlexItem>
<FlexItem>
<IconValue
icon="star"
text="302 stars today"
/>
</FlexItem>
</Flex>
</Flex>
</div>
<SectionSeparator />
<div className="p_sm">
<Flex
orientation="column"
vertical="stretch"
>
<Flex
spacing="between"
>
<FlexItem>
<h3>
<Icon
fixedWidth
icon="book"
paddingRight="xs"
/>
<a>{'jofpin / trape'}</a>
</h3>
</FlexItem>
<FlexItem>
<Button
icon="star"
text="Star"
variant="secondary"
/>
</FlexItem>
</Flex>
<FlexItem
paddingBottom="xs"
>
{'Learning to scrape using the trape tool.'}
</FlexItem>
<Flex
spacing="between"
>
<FlexItem>
<FlexItem>
<Flex
wrap
>
<FlexItem>
<Legend
color="data_2"
paddingRight="xs"
text="Python"
/>
</FlexItem>
<FlexItem>
<IconValue
icon="star"
paddingRight="sm"
text="2,278"
/>
</FlexItem>
<FlexItem>
<IconValue
icon="bezier-curve"
paddingRight="sm"
text="1,366"
/>
</FlexItem>
<FlexItem>
<Flex>
<FlexItem>
<Body
color="light"
paddingRight="sm"
text="Built by"
/>
</FlexItem>
<FlexItem>
<MultipleUsers
users={[
{
name: 'Patrick Welch',
imageUrl: 'https://randomuser.me/api/portraits/men/30.jpg',
},
{
name: 'Lucille Sanchez',
imageUrl: 'https://randomuser.me/api/portraits/women/31.jpg',
},
{
name: 'Beverly Reyes',
imageUrl: 'https://randomuser.me/api/portraits/women/32.jpg',
},
{
name: 'Keith Craig',
imageUrl: 'https://randomuser.me/api/portraits/men/33.jpg',
},
{
name: 'Alicia Cooper',
imageUrl: 'https://randomuser.me/api/portraits/women/34.jpg',
},
]}
/>
</FlexItem>
</Flex>
</FlexItem>
</Flex>
</FlexItem>
</FlexItem>
<FlexItem>
<IconValue
icon="star"
text="789 stars today"
/>
</FlexItem>
</Flex>
</Flex>
</div>
</Card>
</Background>
</div>
</div>
)
}
export default TrendingRepositories
import React from 'react'
import { Background, Body, Button, Card, Flex, FlexItem, Icon, IconValue, Legend, MultipleUsers, Nav, NavItem, SectionSeparator, Title } from 'playbook-ui'
const TrendingRepositories = () => {
window.addEventListener('DOMContentLoaded', () => {
const mobileView = document.querySelector('.nav-bar-header-mobile')
const desktopView = document.querySelector('.nav-bar-header-desktop')
const cardBody = document.querySelector('.card_body_marg')
const viewSize = () => {
if (window.innerWidth < 415){
mobileView.style.display = 'block'
desktopView.style.display = 'none'
cardBody.style.cssText = 'margin:8px!important;'
} else {
mobileView.style.display = 'none'
desktopView.style.display = 'block'
cardBody.style.cssText = 'margin:40px!important;'
}
}
viewSize()
window.addEventListener('resize', () => {
viewSize()
})
})
return (
<div>
<div
className="nav-bar-header-desktop"
style={{ display: 'none' }}
>
<Background
backgroundColor="white"
paddingBottom="none"
paddingTop="md"
>
<Flex
paddingLeft="xl"
paddingRight="md"
spacing="between"
>
<FlexItem>
<Nav
link="#"
marginLeft="sm"
orientation="horizontal"
>
<NavItem
link="#"
text="Explore"
/>
<NavItem
link="#"
text="Topics"
/>
<NavItem
active
link="#"
text="Trending"
/>
<NavItem
link="#"
text="Collections"
/>
<NavItem
link="#"
text="Events"
/>
<NavItem
link="#"
text="Sponsors"
/>
</Nav>
</FlexItem>
<FlexItem>
<Button
marginRight="lg"
onClick={() => alert('button clicked!')}
text="Get email updates"
/>
</FlexItem>
</Flex>
</Background>
<SectionSeparator />
</div>
<div
className="nav-bar-header-mobile"
style={{ display: 'none' }}
>
<Background
backgroundColor="white"
paddingBottom="none"
paddingTop="md"
>
<Flex
paddingLeft="lg"
paddingRight="md"
spacing="between"
>
<FlexItem>
<Nav
link="#"
marginLeft="none"
orientation="horizontal"
>
<NavItem
link="#"
text="Explore"
/>
<NavItem
active
link="#"
text="Trending"
/>
</Nav>
</FlexItem>
</Flex>
</Background>
<SectionSeparator />
</div>
<div className="trending-section">
<Flex
orientation="column"
padding="xl"
vertical="center"
>
<FlexItem>
<Title
size={1}
tag="h1"
text="Trending"
/>
</FlexItem>
<FlexItem>
<Body
color="light"
text="See what the kodemonkey community is most excited about today."
/>
</FlexItem>
</Flex>
<SectionSeparator />
</div>
<div className="cards-body">
<Background
backgroundColor="white"
padding="sm"
>
<Card
className="card_body_marg"
margin="xl"
padding="none"
>
<Background
backgroundColor="light"
>
<Flex
spacing="between"
wrap
>
<FlexItem>
<Nav
link="#"
orientation="horizontal"
>
<NavItem
active
link="#"
text="Repositories"
/>
<NavItem
link="#"
text="Developers"
/>
</Nav>
</FlexItem>
<div className="p_sm">
<FlexItem>
<Flex
horizontal="right"
spacing="evenly"
wrap
>
<FlexItem
paddingRight="lg"
>
{'Spoken Language: '}
<Title
size={4}
tag="span"
text="Any "
/>
<span>▾</span>
</FlexItem>
<FlexItem
paddingRight="lg"
>
{'Language: '}
<Title
size={4}
tag="span"
text="Any "
/>
<span>▾</span>
</FlexItem>
<FlexItem
padding="none"
>
{'Date Range: '}
<Title
size={4}
tag="span"
text="Today "
/>
<span>▾</span>
</FlexItem>
</Flex>
</FlexItem>
</div>
</Flex>
</Background>
<SectionSeparator />
<div className="p_sm">
<Flex
orientation="column"
vertical="stretch"
>
<Flex
spacing="between"
>
<FlexItem>
<h3>
<Icon
fixedWidth
icon="book"
paddingRight="xs"
/>
<a>{'themsaid / ibis'}</a>
</h3>
</FlexItem>
<FlexItem>
<Button
icon="star"
text="Star"
variant="secondary"
/>
</FlexItem>
</Flex>
<FlexItem
paddingBottom="xs"
>
{'A PHP tool that helps you write eBooks in markdown and convert to PDF.'}
</FlexItem>
<Flex
spacing="between"
>
<FlexItem>
<FlexItem>
<Flex
wrap
>
<FlexItem>
<Legend
color="data_1"
paddingRight="xs"
text="HTML"
/>
</FlexItem>
<FlexItem>
<IconValue
icon="star"
paddingRight="sm"
text="2,278"
/>
</FlexItem>
<FlexItem>
<IconValue
icon="bezier-curve"
paddingRight="sm"
text="1,366"
/>
</FlexItem>
<FlexItem>
<Flex>
<FlexItem>
<Body
color="light"
paddingRight="sm"
text="Built by"
/>
</FlexItem>
<FlexItem>
<MultipleUsers
users={[
{
name: 'Patrick Welch',
imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
},
{
name: 'Lucille Sanchez',
imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
},
{
name: 'Beverly Reyes',
imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
},
{
name: 'Keith Craig',
imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
},
{
name: 'Alicia Cooper',
imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
},
]}
/>
</FlexItem>
</Flex>
</FlexItem>
</Flex>
</FlexItem>
</FlexItem>
<FlexItem>
<IconValue
icon="star"
text="402 stars today"
/>
</FlexItem>
</Flex>
</Flex>
</div>
<SectionSeparator />
<div className="p_sm">
<Flex
orientation="column"
vertical="stretch"
>
<Flex
spacing="between"
>
<FlexItem>
<h3>
<Icon
fixedWidth
icon="book"
paddingRight="xs"
/>
<a>{'l1ving / youtube-dl'}</a>
</h3>
</FlexItem>
<FlexItem>
<Button
icon="star"
text="Star"
variant="secondary"
/>
</FlexItem>
</Flex>
<FlexItem
paddingBottom="xs"
>
{'A fork of youtube-dl, for archival purposes.'}
</FlexItem>
<Flex
spacing="between"
>
<FlexItem>
<FlexItem>
<Flex
wrap
>
<FlexItem>
<Legend
color="data_2"
paddingRight="xs"
text="Python"
/>
</FlexItem>
<FlexItem>
<IconValue
icon="star"
paddingRight="sm"
text="2,278"
/>
</FlexItem>
<FlexItem>
<IconValue
icon="bezier-curve"
paddingRight="sm"
text="1,366"
/>
</FlexItem>
<FlexItem>
<Flex>
<FlexItem>
<Body
color="light"
paddingRight="sm"
text="Built by"
/>
</FlexItem>
<FlexItem>
<MultipleUsers
users={[
{
name: 'Patrick Welch',
imageUrl: 'https://randomuser.me/api/portraits/men/12.jpg',
},
{
name: 'Lucille Sanchez',
imageUrl: 'https://randomuser.me/api/portraits/women/15.jpg',
},
{
name: 'Beverly Reyes',
imageUrl: 'https://randomuser.me/api/portraits/women/17.jpg',
},
{
name: 'Keith Craig',
imageUrl: 'https://randomuser.me/api/portraits/men/18.jpg',
},
{
name: 'Alicia Cooper',
imageUrl: 'https://randomuser.me/api/portraits/women/19.jpg',
},
]}
/>
</FlexItem>
</Flex>
</FlexItem>
</Flex>
</FlexItem>
</FlexItem>
<FlexItem>
<IconValue
icon="star"
text="172 stars today"
/>
</FlexItem>
</Flex>
</Flex>
</div>
<SectionSeparator />
<div className="p_sm">
<Flex
orientation="column"
vertical="stretch"
>
<Flex
spacing="between"
>
<FlexItem>
<h3>
<Icon
fixedWidth
icon="book"
paddingRight="xs"
/>
<a>{'apache / incubator-nuttx'}</a>
</h3>
</FlexItem>
<FlexItem>
<Button
icon="star"
text="Star"
variant="secondary"
/>
</FlexItem>
</Flex>
<FlexItem
paddingBottom="xs"
>
{'Apache NuttX is a mature, real-time embedded operating system (RTOS).'}
</FlexItem>
<Flex
spacing="between"
>
<FlexItem>
<FlexItem>
<Flex
wrap
>
<FlexItem>
<Legend
color="data_3"
paddingRight="xs"
text="C"
/>
</FlexItem>
<FlexItem>
<IconValue
icon="star"
paddingRight="sm"
text="2,278"
/>
</FlexItem>
<FlexItem>
<IconValue
icon="bezier-curve"
paddingRight="sm"
text="1,366"
/>
</FlexItem>
<FlexItem>
<Flex>
<FlexItem>
<Body
color="light"
paddingRight="sm"
text="Built by"
/>
</FlexItem>
<FlexItem>
<MultipleUsers
users={[
{
name: 'Patrick Welch',
imageUrl: 'https://randomuser.me/api/portraits/men/20.jpg',
},
{
name: 'Lucille Sanchez',
imageUrl: 'https://randomuser.me/api/portraits/women/22.jpg',
},
{
name: 'Beverly Reyes',
imageUrl: 'https://randomuser.me/api/portraits/women/23.jpg',
},
{
name: 'Keith Craig',
imageUrl: 'https://randomuser.me/api/portraits/men/24.jpg',
},
{
name: 'Alicia Cooper',
imageUrl: 'https://randomuser.me/api/portraits/women/29.jpg',
},
]}
/>
</FlexItem>
</Flex>
</FlexItem>
</Flex>
</FlexItem>
</FlexItem>
<FlexItem>
<IconValue
icon="star"
text="302 stars today"
/>
</FlexItem>
</Flex>
</Flex>
</div>
<SectionSeparator />
<div className="p_sm">
<Flex
orientation="column"
vertical="stretch"
>
<Flex
spacing="between"
>
<FlexItem>
<h3>
<Icon
fixedWidth
icon="book"
paddingRight="xs"
/>
<a>{'jofpin / trape'}</a>
</h3>
</FlexItem>
<FlexItem>
<Button
icon="star"
text="Star"
variant="secondary"
/>
</FlexItem>
</Flex>
<FlexItem
paddingBottom="xs"
>
{'Learning to scrape using the trape tool.'}
</FlexItem>
<Flex
spacing="between"
>
<FlexItem>
<FlexItem>
<Flex
wrap
>
<FlexItem>
<Legend
color="data_2"
paddingRight="xs"
text="Python"
/>
</FlexItem>
<FlexItem>
<IconValue
icon="star"
paddingRight="sm"
text="2,278"
/>
</FlexItem>
<FlexItem>
<IconValue
icon="bezier-curve"
paddingRight="sm"
text="1,366"
/>
</FlexItem>
<FlexItem>
<Flex>
<FlexItem>
<Body
color="light"
paddingRight="sm"
text="Built by"
/>
</FlexItem>
<FlexItem>
<MultipleUsers
users={[
{
name: 'Patrick Welch',
imageUrl: 'https://randomuser.me/api/portraits/men/30.jpg',
},
{
name: 'Lucille Sanchez',
imageUrl: 'https://randomuser.me/api/portraits/women/31.jpg',
},
{
name: 'Beverly Reyes',
imageUrl: 'https://randomuser.me/api/portraits/women/32.jpg',
},
{
name: 'Keith Craig',
imageUrl: 'https://randomuser.me/api/portraits/men/33.jpg',
},
{
name: 'Alicia Cooper',
imageUrl: 'https://randomuser.me/api/portraits/women/34.jpg',
},
]}
/>
</FlexItem>
</Flex>
</FlexItem>
</Flex>
</FlexItem>
</FlexItem>
<FlexItem>
<IconValue
icon="star"
text="789 stars today"
/>
</FlexItem>
</Flex>
</Flex>
</div>
</Card>
</Background>
</div>
</div>
)
}
export default TrendingRepositories