import React from 'react'; import structUtils from '../../utils/struct'; import ReactDOMServer from 'react-dom/server'; import { ServerStyleSheet } from 'styled-components'; import { List, ListItem, Name, Url, Footer, Label, Dot, Link, HeaderName } from './styled'; import partials from './partials'; const sheet = new ServerStyleSheet(); const Welcome = () => { const { live = [], dev = [], page = [] } = structUtils.groupBy(partials, item => item.status); const renderItem = item => ( <ListItem> <Link href={item.previewUrl ? item.previewUrl : `${item.url}?preview`} target='_blank'> <Name>{item.name}</Name> <Url>{item.url}</Url> <Footer> <Label status={item.status}> {item.status} <Dot status={item.status} /> </Label> </Footer> </Link> </ListItem> ); return ( <List> <HeaderName>Live</HeaderName> {live.map(item => renderItem(item))} <HeaderName>Pages</HeaderName> {page.map(item => renderItem(item))} <HeaderName>Development</HeaderName> {dev.map(item => renderItem(item))} </List> ); }; export default ReactDOMServer.renderToString(sheet.collectStyles(<Welcome />)); const styleTags = sheet.getStyleTags(); export { styleTags };