theme-ui#Card JavaScript Examples

ListItem = ({ title, type, link, linkText, description, isMobile }) => {
  return (
    <Card px={4}>
      <Link href={link} passHref>
        <Grid columns={['1fr auto', '1fr 1fr auto']}>
          <Flex sx={{ flexDirection: 'column' }}>
            <Heading sx={{ cursor: 'pointer' }} variant="microHeading">
              {title}
            </Heading>
            <Text sx={{ cursor: 'pointer' }}>{description}</Text>
          </Flex>

          {!isMobile && (
            <Flex sx={{ alignItems: 'center' }}>
              <Text>{type}</Text>
            </Flex>
          )}

          <Flex sx={{ alignItems: 'center', justifyContent: 'flex-end' }}>
            <Text sx={{ variant: 'smallText', cursor: 'pointer' }} pr={2}>
              {linkText}
            </Text>
            <Icon name="increase" />
          </Flex>
        </Grid>
      </Link>
    </Card>
  );
}

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>
)

CodeBox = ({ cta, sections }) => {
  const [activeTool, setActiveTool] = useState(0);

  return (
    <Container>
      <Heading sx={{ pb: [3, 4] }} variant="mediumHeading">
        {cta}
      </Heading>
      <Grid
        columns={[1, '1fr auto']}
        sx={{
          columnGap: 4,
        }}
      >
        <Box>
          <Card
            sx={{
              height: '500px',
              width: '100%',
              bg: 'background',
            }}
          >
            <CodeWrapper
              value={sections[activeTool].code}
              language={sections[activeTool].language}
            />
          </Card>
        </Box>
        <Box>
          <Grid
            sx={{
              rowGap: 4,
            }}
          >
            {sections.map((tool, i) => {
              const { title, des, link } = tool;
              const isActive = i === activeTool;
              return (
                <Box key={tool.title}>
                  <Heading
                    variant="microHeading"
                    onClick={() => {
                      setActiveTool(i);
                    }}
                    sx={{ cursor: 'pointer' }}
                  >
                    {title}
                  </Heading>
                  {!isActive ? null : (
                    <Grid
                      sx={{
                        rowGap: 2,
                        pt: 2,
                      }}
                    >
                      <Text>{des}</Text>
                      <Link href={link} passHref>
                        <Flex sx={{ alignItems: 'center' }}>
                          <Icon sx={{ mr: 2 }} name={'arrow_right'}></Icon>
                          <ThemeLink sx={{ color: 'text', cursor: 'pointer' }}>Read More</ThemeLink>
                        </Flex>
                      </Link>
                    </Grid>
                  )}
                </Box>
              );
            })}
          </Grid>
        </Box>
      </Grid>
    </Container>
  );
}

DocumentationList = () => {
  return (
    <Box>
      <Container>
        <Flex sx={{ mb: 3, alignItems: 'center', justifyContent: 'space-between' }}>
          <Heading variant="largeHeading">Documentation</Heading>

          <Link href={'/documentation'} passHref>
            <Flex sx={{ ml: 3, alignItems: 'center' }}>
              <Icon sx={{ mr: 2 }} color="primary" name={'arrow_right'}></Icon>
              <ThemeLink sx={{ color: 'text', cursor: 'pointer' }}>Start learning</ThemeLink>
            </Flex>
          </Link>
        </Flex>
      </Container>
      <Grid
        sx={{
          columnGap: 3,
          gridAutoFlow: 'column',
          overflowX: 'auto',
          pl: [2, 'calc(50% - 1140px / 2)'],
          '::-webkit-scrollbar': {
            display: 'none',
          },
          scrollbarWidth: 'none',

          gridTemplateRows: 'auto',

          rowGap: 3,
        }}
      >
        {docLinks.map(({ name, url }) => {
          return (
            <Link key={name} href={`${url}`} passHref>
              <Card
                sx={{
                  width: 180,
                  border: 'light',
                  bg: 'background',
                  borderColor: 'muted',
                  cursor: 'pointer',
                  '&:hover': {
                    borderColor: 'primaryEmphasis',
                  },
                }}
              >
                <Flex
                  sx={{
                    flexDirection: 'column',
                    justifyContent: 'space-between',
                    height: '100%',
                  }}
                >
                  <Heading>{name}</Heading>
                  <Flex sx={{ alignItems: 'center' }}>
                    <Icon sx={{ mr: 2 }} color="primary" name={'arrow_right'}></Icon>
                    <ThemeLink sx={{ color: 'text', cursor: 'pointer' }}>View Docs</ThemeLink>
                  </Flex>
                </Flex>
              </Card>
            </Link>
          );
        })}
      </Grid>
    </Box>
  );
}

RepoCard = ({ repo }) => {
  return (
    <Card
      sx={{
        backgroundColor: 'cardBackground',
        fontFamily: 'inter',
        borderRadius: 8,
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: 'cardBorder',
        padding: '15px 15px 25px 20px',
        ':hover': {
          cursor: 'pointer',
        },
      }}
      onClick={() => openGithubPage(repo.html_url)}
    >
      <Box
        sx={{
          paddingBottom: 25,
          height: '80%',
        }}
      >
        <Text sx={{ wordBreak: 'break-all', fontSize: 20, py: '8px' }}>
          {repo.name}
        </Text>
        <Text
          sx={{
            wordBreak: 'break-all',
            fontSize: 16,
            py: '4px',
            color: '#9d1e1e',
          }}
        >
          {repo.full_name}
        </Text>
        <Text
          sx={{ pt: '4px', color: '#805f5f', lineHeight: '20px', fontSize: 14 }}
        >
          {repo.description}
        </Text>
      </Box>
      <Grid
        columns={4}
        sx={{
          borderTop: 'solid 1px rgba(255, 255, 255, 0.05)',
          paddingTop: 15,
          textAlign: 'center',
          fontSize: 14,
        }}
      >
        <Text>
          <span
            role="img"
            aria-label="star"
            style={{ verticalAlign: 'middle' }}
          >
            <StarIcon />
          </span>{' '}
          {repo.stargazers_count}
        </Text>
        <Text>
          <span
            role="img"
            aria-label="issues"
            style={{ verticalAlign: 'middle' }}
          >
            <IssueIcon />
          </span>{' '}
          {repo.open_issues_count}
        </Text>
        <a href={repo.html_url} style={{ color: 'currentColor' }}>
          <Text>
            <span
              role="img"
              aria-label="github"
              style={{ verticalAlign: 'middle' }}
            >
              <GithubIcon />
            </span>{' '}
            Github
          </Text>
        </a>
        {displayLogo()}
      </Grid>
    </Card>
  )

  function displayLogo() {
    //check if logoMapper contains the repo.language as a key
    if (logoMapper[repo.language] !== undefined) {
      return (
        <Text>
          <span
            className="tooltip"
            role="img"
            aria-label="language"
            style={{ verticalAlign: 'middle' }}
          >
            <img
              width="16px"
              height="16px"
              src={logoMapper[repo.language]}
              alt={repo.language}
            />
            {checkNullLang()}
          </span>
        </Text>
      ) //checkNullLang() for tool tip visibility.
    }
    //when either repo.language is null or not in logoMapper just displaying code icon with repo.language with no tooltip
    else {
      return (
        <Text>
          <span
            role="img"
            aria-label="code"
            style={{ verticalAlign: 'middle' }}
          >
            <CodeIcon />
          </span>{' '}
          {repo.language}
        </Text>
      )
    }
  }

  function checkNullLang() {
    if (repo.language !== null)
      return <span className="tooltiptext">{repo.language}</span>
  }
}

CommunitySection = ({ mobile }) => {
  const ctaContent = [
    {
      title: 'Join our dev community',
      link: 'https://chat.makerdao.com/channel/dev',
      text: 'Join our chat',
    },
    {
      title: 'Join the conversation',
      link: 'https://forum.makerdao.com/c/devs/19',
      text: 'Join our forum',
    },
    {
      title: 'Be a contributor',
      link: 'https://github.com/makerdao/developer-portal',
      text: 'Github',
    },
  ];

  return (
    <Container>
      <Card sx={{ p: 0, display: 'flex', width: '100%', position: 'relative', zIndex: 0 }}>
        <Icon
          color="textMuted"
          name="tri_1"
          size="150px"
          sx={{
            position: 'absolute',
            top: '-70px',
            left: '60px',
            transform: mobile ? 'scale(0.5, 0.5)' : undefined,
          }}
        />
        <Icon
          color="textMuted"
          name="tri_2"
          size="250px"
          sx={{
            position: 'absolute',
            alignSelf: 'flex-end',
            right: '5px',
            top: '-120px',
            transform: mobile ? 'scale(0.5, 0.5)' : undefined,
          }}
        />
        <Icon
          color="textMuted"
          name="tri_3"
          size="240px"
          sx={{
            position: 'absolute',
            left: '-130px',
            top: '240px',
          }}
        />
        <Icon
          color="textMuted"
          name="tri_4"
          size="90px"
          sx={{
            position: 'absolute',
            alignSelf: 'flex-end',
            right: '60px',
            bottom: '-50px',
          }}
        />
        <Grid sx={{ p: 4, rowGap: 4 }}>
          <Flex sx={{ justifyContent: 'center' }}>
            <Heading variant="largeHeading">
              <InlineText name="joinUs" />
            </Heading>
          </Flex>

          <Grid columns={[1, 3]} sx={{ py: 4 }}>
            {ctaContent.map(({ title, link, text }) => (
              <Card sx={{ p: [3, 3, 4], bg: 'onBackground' }} key={title}>
                <Grid sx={{ height: '100%' }}>
                  <Heading sx={{ color: 'background' }}>{title}</Heading>
                  <ThemeLink sx={{ alignSelf: 'end' }} href={link} target="_blank">
                    <Flex sx={{ alignItems: 'center' }}>
                      <Icon name="increase" color="primary"></Icon>
                      <Text variant="largeText" sx={{ color: 'background', px: 2 }}>
                        {text}
                      </Text>
                    </Flex>
                  </ThemeLink>
                </Grid>
              </Card>
            ))}
          </Grid>
        </Grid>
      </Card>
      <Flex
        sx={{
          justifyContent: mobile ? 'space-between' : 'center',
          alignItems: 'center',
          px: [0, 5, 4],
          py: [5, 4],
        }}
      >
        <Icon color="textMuted" name="smiley" size={6} />
        <Flex sx={{ width: ['50%', '100%', '50%'], p: [0, 4] }}>
          <Heading>
            <InlineTextarea name="communityCallout" />
          </Heading>
        </Flex>
      </Flex>
    </Container>
  );
}

Feedback = ({ route, cms, mobile }) => {
  const ref = useRef(null);
  const rcRef = useRef(null);

  const [reaction, setReaction] = useState(null);

  const isNegative = reaction === 'negative';
  const isPositive = reaction === 'positive';
  const isSubmitted = reaction === 'submitted';

  const { title, placeholder } = isNegative
    ? {
        title: mobile ? 'sorryMobile' : 'sorry',
        placeholder: 'Please let us know how we can improve it.',
      }
    : isPositive
    ? {
        title: mobile ? 'gladMobile' : 'glad',
        placeholder: 'Please let us know how we can make it even better.',
      }
    : isSubmitted
    ? { title: mobile ? 'thanksMobile' : 'thanks' }
    : { title: mobile ? 'helpfulMobile' : 'helpful' };

  const sendFeedback = useCallback(async () => {
    const markdown = constructMarkdownString(reaction, rcRef.current?.value, ref.current?.value);

    try {
      const response = await fetch(process.env.FEEDBACK_ENDPOINT || '/api/feedback', {
        body: JSON.stringify({
          reaction,
          comment: markdown,
          tags: ['feedback', window.location.pathname],
        }),
        headers: {
          'Content-Type': 'application/json',
        },
        method: 'POST',
        credentials: 'same-origin',
        referrerPolicy: 'no-referrer',
      });

      if (!response.ok) {
        throw Error(response.statusText);
      }

      cms.alerts.success('Your feedback has been submitted');
      setReaction('submitted');
    } catch (err) {
      console.error(err);
      cms.alerts.error('there was an error in submitting your feedback');
    }
  }, [reaction, cms.alerts]);

  useEffect(() => {
    setReaction(null);
  }, [route]);

  return (
    <Card
      sx={{
        bg: 'background',
        border: 'light',
        borderColor: 'muted',
        borderRadius: 'small',
        width: '100%',
      }}
    >
      <Flex sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
        <Flex sx={{ alignItems: 'center' }}>
          <Icon
            sx={{ mr: 2 }}
            color="primary"
            size="auto"
            height="20px"
            width="20px"
            name="document"
          ></Icon>
          <Heading variant="smallHeading">
            <InlineText name={title} />
          </Heading>
        </Flex>
        {isSubmitted ? (
          <Flex
            sx={{
              alignItems: 'center',
              justifyContent: 'center',
              bg: 'primary',
              size: 4,
              borderRadius: 'round',
              ml: 'auto',
            }}
          >
            <Icon name="checkmark" size="3" />
          </Flex>
        ) : (
          <Grid columns={2}>
            <Button
              variant="contrastButtonSmall"
              sx={{
                bg: isPositive ? 'primary' : undefined,
                color: isPositive ? 'onPrimary' : undefined,
                minWidth: 42,
              }}
              onClick={() => setReaction('positive')}
            >
              Yes
            </Button>
            <Button
              variant="contrastButtonSmall"
              sx={{
                bg: isNegative ? 'primary' : undefined,
                color: isNegative ? 'onPrimary' : undefined,
                minWidth: 42,
              }}
              onClick={() => setReaction('negative')}
            >
              No
            </Button>
          </Grid>
        )}
      </Flex>
      {(isNegative || isPositive) && (
        <Flex sx={{ flexDirection: 'column', alignItems: 'flex-start' }}>
          <Text sx={{ fontWeight: 'body', mb: 2, mt: 3 }} variant="caps">
            FEEDBACK
          </Text>
          <Textarea
            aria-label="Feedback textarea"
            ref={ref}
            placeholder={placeholder}
            sx={{
              mb: 2,
              bg: 'surface',
              borderColor: 'muted',
              fontSize: 3,
            }}
          ></Textarea>
          <Text sx={{ fontWeight: 'body', mb: 2, mt: 3 }} variant="caps">
            ROCKET CHAT HANDLE (OPTIONAL)
          </Text>
          <Flex sx={{ justifyContent: 'space-between', width: '100%' }}>
            <Input
              sx={{
                mr: 3,
                fontFamily: 'body',
                fontSize: 3,
                bg: 'surface',
                borderColor: 'muted',
                width: ['66%', '100%'],
              }}
              type="email"
              aria-label="Feedback handle"
              placeholder="Enter your Rocket Chat handle if you would like to be in contact."
              ref={rcRef}
            ></Input>
            <Button
              sx={{ px: [2, 4], width: ['33%', 'initial'] }}
              variant="small"
              onClick={sendFeedback}
            >
              Submit
            </Button>
          </Flex>
          <Flex sx={{ pt: 3, flexWrap: 'wrap' }}>
            <Text sx={{ color: 'onBackgroundMuted', pr: 3 }}>
              <InlineText name="additional" />
            </Text>
            <ThemeLink href={'https://chat.makerdao.com/channel/dev'} target="_blank">
              <Flex sx={{ alignItems: 'center' }}>
                <Icon sx={{ mr: 2 }} color="primary" name="chat"></Icon>
                <Text
                  sx={{
                    color: 'text',
                    cursor: 'pointer',
                    '&:hover': {
                      color: 'primaryEmphasis',
                    },
                  }}
                >
                  chat.makerdao.com
                </Text>
              </Flex>
            </ThemeLink>
          </Flex>
        </Flex>
      )}
    </Card>
  );
}

NewsletterCallout = () => {
  const { inputEl, subscribe, loading, success, errorMessage } = useEmailSubscribe();
  return (
    <Container sx={{ display: 'flex', justifyContent: 'center', pb: 6 }}>
      <Grid gap={3}>
        <Heading sx={{ display: 'flex', justifyContent: 'center' }} variant="mediumHeading">
          Want Maker dev updates dripping into your inbox?
        </Heading>
        <Flex sx={{ flexDirection: 'column', justifyContent: 'center' }}>
          <Text variant="plainText" sx={{ alignSelf: 'center' }}>
            <InlineTextarea name="devUpdatesSubtext1" />
          </Text>
          <Text sx={{ alignSelf: 'center', pb: 3 }} variant="plainText">
            <InlineTextarea name="devUpdatesSubtext2" />
          </Text>
        </Flex>
        {success ? (
          <Card sx={{ p: 4 }}>
            <Flex sx={{ flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
              <Flex
                sx={{
                  position: 'absolute',
                  top: '-50px',
                  alignItems: 'center',
                  justifyContent: 'center',
                  bg: 'primary',
                  size: '40px',
                  borderRadius: 'round',
                  mx: 2,
                }}
              >
                <Icon name="checkmark" size="3" />
              </Flex>
              <Text variant="plainText" sx={{ fontWeight: 'bold', fontSize: 4 }}>
                Thank you for signing up!
              </Text>
              <Text variant="plainText" sx={{ fontSize: 2 }}>
                Stay tuned, you will get dev updates soon.
              </Text>
            </Flex>
          </Card>
        ) : (
          <>
            <Flex sx={{ flexDirection: 'column' }}>
              <Flex sx={{ justifyContent: 'center' }}>
                <Input
                  aria-label="Email for newsletter"
                  ref={inputEl}
                  type="email"
                  placeholder="Email"
                  disabled={loading}
                  sx={{
                    fontFamily: 'heading',
                    fontSize: 5,
                    bg: 'onBackground',
                    borderColor: 'onBackground',
                    borderRadius: (theme) =>
                      `${theme.radii.small}px 0px 0px ${theme.radii.small}px`,
                    pl: 4,
                    '&:focus': {
                      color: 'background',
                    },
                  }}
                ></Input>
                <Button
                  disabled={loading}
                  onClick={subscribe}
                  sx={{
                    borderColor: 'primary',
                    borderRadius: (theme) =>
                      `0px ${theme.radii.small}px ${theme.radii.small}px 0px`,
                    py: 2,
                    width: 7,
                    fontSize: 5,
                  }}
                >
                  Sign up
                </Button>
              </Flex>
              {errorMessage && (
                <Text variant="plainText" sx={{ py: 2, px: 4, fontSize: 1, color: 'primary' }}>
                  {errorMessage}
                </Text>
              )}
            </Flex>
          </>
        )}
      </Grid>
    </Container>
  );
}