site/components/winter/breakdown-box.js

import {
  Box,
  Card,
  Flex,
  Container,
  Heading,
  Text,
  Badge,
  Link
} from 'theme-ui'
import { Zoom } from 'react-reveal'
import Icon from '@hackclub/icons'

function BreakdownBox({
  subtitle,
  icon,
  text,
  description,
  delay,
  href,
  color,
  bg
}) {
  return (
    <Zoom delay={delay}>
      <Card
        sx={{
          color: 'white',
          background: 'rgba(225,225,225,0.2)',
          height: '100%',
          cursor: `${href ? 'pointer' : 'default'}`,
          display: 'flex',
          flexDirection: 'column'
          // justifyContent: 'flex-end'
        }}
        variant="interactive"
        as={href ? 'a' : 'div'}
        href={href}
      >
        {subtitle ? (
          <Text
            as="h1"
            sx={{
              fontSize: [2, 3, 4]
            }}
          >
            {subtitle}
          </Text>
        ) : (
          <Box
            as="span"
            sx={{
              width: 'fit-content',
              bg: bg || 'white',
              borderRadius: 18,
              lineHeight: 0,
              p: 2,
              mb: 1,
              display: 'inline-block',
              transform: ['scale(0.75)', 'none'],
              transformOrigin: 'bottom left',
              boxShadow:
                'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
            }}
          >
            <Icon glyph={icon} size={48} color={color || 'white'} />
          </Box>
        )}
        <Heading
          sx={{
            fontSize: [3, 4, 5]
          }}
        >
          {text}
        </Heading>
        <Text
          as="p"
          sx={{
            fontSize: [2, 3]
          }}
        >
          {description}
        </Text>
      </Card>
    </Zoom>
  )
}

export default BreakdownBox