wix-style-react/src/Box/docs/Box.demo.js

wix-style-react

import React from 'react';
import Box from '..';
import Heading from '../../Heading';
import IconButton from '../../IconButton';
import Image from '../../Image/Image';
import Text from '../../Text';
import * as Icons from 'wix-ui-icons-common';

export default () => (
  <Box height={160}>
    <Box align="center" verticalAlign="middle" width={180}>
      <Image
        height="180px"
        borderRadius="8px 0px 0px 8px"
        src="running_man.png"
      />
    </Box>
    <Box
      direction="vertical"
      borderRadius="0px 8px 8px 0px"
      verticalAlign="space-between"
      padding="18px 24px"
      backgroundColor="D80"
      flexGrow={1}
    >
      <Box verticalAlign="space-between" flexGrow={1}>
        <Box direction="vertical" gap="3px">
          <Heading appearance="H4">Get running!</Heading>
          <Text size="small" secondary>
            Scheduled | 57 days
          </Text>
        </Box>
        <IconButton skin="inverted" size="small">
          <Icons.More />
        </IconButton>
      </Box>
      <Box align="space-between">
        <Box gap="24px">
          <Box verticalAlign="middle" gap="0px">
            <Icons.LockUnlockedSmall />
            <Box marginLeft={1}>
              <Text size="small">Public</Text>
            </Box>
          </Box>
          <Box verticalAlign="middle">
            <Box marginLeft={1}>
              <Text size="small">Join for Free</Text>
            </Box>
          </Box>
        </Box>
        <Box>
          <Box verticalAlign="middle">
            <Box marginRight={3}>
              <Text size="small" secondary light>
                Created on April 26, 2021
              </Text>
            </Box>
          </Box>
        </Box>
      </Box>
    </Box>
  </Box>
);