StyledCard.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'
import { FluidType } from 'enum/fluid.enum'

const CardBase = withStyles({
  root: {
    background: 'linear-gradient(180deg, #323339 0%, #25262B 100%)',
    boxSizing: 'border-box',
    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.75)',
    borderRadius: '4px',
    margin: '10px 0px 20px 0px',
  },
})(CardActionArea)

const CardElec = withStyles({
  root: {
    border: '1px solid var(--elecColor40)',
  },
})(CardBase)

const CardWater = withStyles({
  root: {
    border: '1px solid var(--waterColor40)',
  },
})(CardBase)

const CardGas = withStyles({
  root: {
    border: '1px solid var(--gasColor40)',
  },
})(CardBase)

const CardContentBase = withStyles({
  root: {
    color: 'white',
  },
})(CardContent)

interface StyledCardProps extends CardActionAreaProps {
  fluidType?: FluidType
}

const GenerateContentCard = (
  fluidType: FluidType,
  children: ReactNode
): React.ReactFragment => {
  return <CardContentBase>{children}</CardContentBase>
}

const StyledCard: React.ComponentType<StyledCardProps> = ({
  fluidType,
  ...props
}: StyledCardProps) => {
  switch (fluidType) {
    case FluidType.ELECTRICITY:
      return (
        <CardElec {...props}>
          {GenerateContentCard(fluidType, props.children)}
        </CardElec>
      )
    case FluidType.WATER:
      return (
        <CardWater {...props}>
          {GenerateContentCard(fluidType, props.children)}
        </CardWater>
      )
    case FluidType.GAS:
      return (
        <CardGas {...props}>
          {GenerateContentCard(fluidType, props.children)}
        </CardGas>
      )
    default:
      return (
        <CardBase {...props}>
          <CardContentBase>{props.children}</CardContentBase>
        </CardBase>
      )
  }
}

export default StyledCard