/** @jsx jsx */ import { jsx, Heading, Box, Flex, Grid, Container, Link as ThemeLink } from 'theme-ui'; import Link from 'next/link'; import { Icon } from '@makerdao/dai-ui-icons'; import GuideCard from '@components/GuideCard'; const GuideList = ({ guides, title, path }) => { return ( <Flex> <Box> <Container> <Flex sx={{ alignItems: 'center', flexWrap: 'wrap', mb: 3, }} > <Heading variant="largeHeading">{title}</Heading> <Link href={'/guides'} passHref> <Flex sx={{ ml: 'auto', alignItems: 'center' }}> <Icon sx={{ mr: 2 }} color="primary" name={'arrow_right'}></Icon> <ThemeLink sx={{ color: 'text', cursor: 'pointer' }}>View All</ThemeLink> </Flex> </Link> </Flex> </Container> <Grid gap={4} sx={{ ml: [0, 2], gridAutoFlow: 'column', overflowX: 'auto', pl: [2, 'calc(50% - 1140px / 2)'], '::-webkit-scrollbar': { display: 'none', }, scrollbarWidth: 'none', }} > {guides.map((guide, i) => { if (!guide) return null; const { data: { frontmatter: { group, title, slug, description, tags }, }, } = guide; return ( <GuideCard key={title} title={title} type={group} description={description} link={`/${path}/${slug}/`} linkText={'Read'} icon={`stamp_${(i % 5) + 1}`} tags={tags} sx={{ width: 7, border: 'light', borderColor: 'muted', borderRadius: 'small', '&:hover': { borderColor: 'primaryEmphasis', }, p: 3, }} /> ); })} </Grid> </Box> </Flex> ); }; export default GuideList;