/** @jsx jsx */ import { useState } from 'react'; import { Container, jsx, Heading, Grid, Flex, NavLink, Card, Text, Link as ThemeLink, } from 'theme-ui'; import { EcosystemCategories } from '../utils/constants'; import { Icon } from '@makerdao/dai-ui-icons'; const SUBMIT_LINK = 'https://docs.google.com/forms/d/e/1FAIpQLScbdfZdX-AM9N0vhowHKGfyWWuPtpkaBeIC46T2H1hg4hfsUw/viewform'; const ListItem = ({ title, link, description }) => ( <Card px={4}> <ThemeLink href={link} target="_blank"> <Grid columns={'1fr auto'}> <Flex sx={{ flexDirection: 'column' }}> <Heading sx={{ cursor: 'pointer' }} variant="microHeading"> {title} </Heading> <Text sx={{ cursor: 'pointer' }} variant="smallText"> {description} </Text> </Flex> <Flex sx={{ alignItems: 'center', justifyContent: 'flex-end' }}> <Icon name="increase" color="text" /> </Flex> </Grid> </ThemeLink> </Card> ); const Ecosystem = ({ title, items }) => { const tabs = items .reduce((acc, { categories }) => acc.push(...categories) && acc, []) .filter((item, idx, array) => array.indexOf(item) === idx) .sort(); const [activeTab, setActiveTab] = useState(tabs[0]); return ( <Container> <Flex sx={{ flexDirection: 'column', mb: 6, }} > <Flex sx={{ pb: 4, alignItems: 'center', }} > <Flex sx={{ width: '100%', justifyContent: 'space-between', alignItems: 'center' }}> <Heading>{title}</Heading> <ThemeLink href={SUBMIT_LINK} target="_blank"> <Flex sx={{ alignItems: 'center' }}> <Text sx={{ color: 'text', cursor: 'pointer' }}>Submit your tool</Text> <Icon sx={{ ml: 2 }} color="primary" name={'arrow_right'}></Icon> </Flex> </ThemeLink> </Flex> </Flex> <Flex sx={{ alignItems: 'center', pb: 2, overflow: 'auto', }} > {tabs.map((name) => ( <NavLink key={name} onClick={() => setActiveTab(name)} sx={{ color: activeTab === name ? 'primary' : undefined, minWidth: 'max-content', pl: 2, pr: 4, '&:first-of-type': { pl: 0 }, }} > {EcosystemCategories[name]} </NavLink> ))} </Flex> <Grid columns={[1, 2]} sx={{ width: '100%' }}> {items .filter(({ categories }) => categories.includes(activeTab)) .map(({ title, link, description }) => { return <ListItem key={title} title={title} description={description} link={link} />; })} </Grid> </Flex> </Container> ); }; export default Ecosystem;