StyledEcogestureCard.tsx

import React, { ReactNode } from 'react'
import CardActionArea, {
  CardActionAreaProps,
} from '@material-ui/core/CardActionArea'
import CardContent from '@material-ui/core/CardContent'
import { withStyles } from '@material-ui/core/styles'

const CardBase = withStyles({
  root: {
    background: 'linear-gradient(180deg, #323339 0%, #25262B 100%)',
    border: '1px solid',
    boxSizing: 'border-box',
    boxShadow: '0px 4px 16px black',
    borderRadius: '4px',
    margin: '10px 0px 10px 0px',
    padding: '0.5rem 1rem',
    minHeight: '72px',
  },
})(CardActionArea)

const CardUnlocked = withStyles({
  root: {
    border: '1px solid var(--blue)',
    color: 'white',
    height: '100%',
    padding: 0,
  },
})(CardBase)

const CardBlueBorderContentBase = withStyles({
  root: {
    border: '1px solid var(--blue)',
    height: '100%',
    padding: 0,
  },
})(CardBase)
const CardChallengeBase = withStyles({
  root: {
    height: '100%',
    padding: 0,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
})(CardContent)

const CardContentBase = withStyles({
  root: {
    color: 'white',
    height: '100%',
    padding: 0,
  },
})(CardContent)

interface StyledEcogestureCardProps extends CardActionAreaProps {
  unlocked?: boolean
  border?: boolean
}

const GenerateContentCard = (children: ReactNode): React.ReactFragment => {
  return <CardChallengeBase>{children}</CardChallengeBase>
}

const StyledEcogestureCard: React.ComponentType<StyledEcogestureCardProps> = ({
  unlocked,
  border,
  ...props
}: StyledEcogestureCardProps) => {
  if (unlocked) {
    return (
      <CardUnlocked {...props}>
        {GenerateContentCard(props.children)}
      </CardUnlocked>
    )
  } else if (border) {
    return (
      <CardBlueBorderContentBase {...props}>
        {GenerateContentCard(props.children)}
      </CardBlueBorderContentBase>
    )
  } else {
    return (
      <CardBase {...props}>
        <CardContentBase>{props.children}</CardContentBase>
      </CardBase>
    )
  }
}

export default StyledEcogestureCard