12.9.1
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
