theme-ui#Avatar JavaScript Examples

The following examples show how to use theme-ui#Avatar. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Contributors.js    From developer-portal with Apache License 2.0 6 votes vote down vote up 
LineItem = ({ date, author, avatar, mobile }) => {
  return (
    <Flex sx={{ pt: 4, flexWrap: mobile ? 'wrap' : 'nowrap' }}>
      <Flex sx={{ alignItems: 'center' }}>
        <Text variant="caps" sx={{ fontSize: 2, visibility: 'hidden' }}>
          Last Edit:
        </Text>
        <Text sx={{ pl: 3 }}>{date}</Text>
      </Flex>
      <Flex sx={{ ml: [0, 4], alignItems: 'center' }}>
        <Text variant="caps" sx={{ fontSize: 2, visibility: 'hidden' }}>
          By:
        </Text>
        <ThemeLink href={`https://github.com/${author}`} target="_blank">
          <Flex sx={{ alignItems: 'center' }}>
            <Avatar sx={{ mx: 2, minWidth: 36, minHeight: 36 }} src={avatar} />
            <Icon sx={{ ml: 'auto' }} color="primary" name="increase"></Icon>
            <Text
              sx={{
                color: 'text',
                pl: 2,
                '&:hover': {
                  color: 'primaryEmphasis',
                },
              }}
            >
              {author}
            </Text>
          </Flex>
        </ThemeLink>
      </Flex>
    </Flex>
  );
}
Example #2
Source File: Contributors.js    From developer-portal with Apache License 2.0 4 votes vote down vote up 
Contributors = ({ contributors = [], mobile }) => {
  const [open, setOpen] = useState(false);
  const [newest, ...rest] = contributors.sort((a, b) => new Date(b.date) - new Date(a.date));

  return (
    <Flex
      sx={{
        py: 3,
        px: 0,
        border: 'light',
        borderColor: 'muted',
        borderWidth: '1px 0 1px 0',
        flexDirection: mobile ? 'column' : 'row',
      }}
    >
      <Flex sx={{ flexDirection: 'column' }}>
        <Flex sx={{ justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <Flex sx={{ pb: 0, flexWrap: mobile ? 'wrap' : 'nowrap' }}>
            <Flex sx={{ alignItems: 'center' }}>
              <Text variant="caps" sx={{ color: 'onBackgroundMuted', fontSize: 2 }}>
                Last Edit:
              </Text>
              <Text sx={{ pl: 3 }}>{toDateString(newest?.date)}</Text>
            </Flex>
            <Flex sx={{ ml: [0, 4], alignItems: 'center', cursor: 'pointer' }}>
              <Text variant="caps" sx={{ color: 'onBackgroundMuted', fontSize: 2 }}>
                By:
              </Text>
              <ThemeLink href={`https://github.com/${newest?.username}`} target="_blank">
                <Flex sx={{ alignItems: 'center' }}>
                  <Avatar
                    sx={{
                      mx: 2,
                      minWidth: 36,
                      minHeight: 36,
                    }}
                    src={newest?.avatar}
                  />
                  <Icon sx={{ ml: 'auto' }} color="primary" name="increase"></Icon>
                  <Text
                    sx={{
                      color: 'text',
                      pl: 2,
                      '&:hover': {
                        color: 'primaryEmphasis',
                      },
                    }}
                  >
                    {newest?.author}
                  </Text>
                </Flex>
              </ThemeLink>
            </Flex>
          </Flex>
        </Flex>
        {open &&
          rest?.map(({ date, username, avatar }) => (
            <LineItem
              key={username}
              date={toDateString(date)}
              author={username}
              avatar={avatar}
              mobile={mobile}
            />
          ))}
      </Flex>
      {rest.length > 0 && (
        <Flex
          sx={{
            justifyContent: 'space-between',
            ml: [0, 0, 'auto'],
            flexDirection: 'column',
            pt: [4, 4, 0],
          }}
        >
          <Flex
            sx={{
              justifyContent: mobile ? 'flex-start' : 'center',
              alignItems: 'center',
              pt: [0, 0, 1],
            }}
            onClick={() => setOpen(!open)}
          >
            <Icon
              sx={{
                ml: [0, 0, 'auto'],
              }}
              color="primary"
              name={open ? 'arrow_up_thin' : 'arrow_down_thin'}
            ></Icon>
            <Text
              sx={{
                pl: 2,
                cursor: 'pointer',
                '&:hover': {
                  color: 'primaryEmphasis',
                },
              }}
            >{`${open ? 'Hide' : 'Show'} All Contributors`}</Text>
          </Flex>
          {open && !mobile && (
            <Flex sx={{ flexDirection: 'column', alignItems: 'flex-end', pl: 5 }}>
              <Text sx={{ color: 'onBackgroundMuted' }}>Thanks to all contributors!</Text>
            </Flex>
          )}
        </Flex>
      )}
    </Flex>
  );
}