test.jsx

import React, { FunctionComponent } from 'react';
import classnames from 'classnames';
import timerIndicatorStyle from './TimeIndicator.module.css';

interface Props {
  className?: string;
  contentClassName?: string;
  description?: string;
  time: string;
}

const TimerIndicator: FunctionComponent<Props> = ({
  className: parentClassName,
  contentClassName,
  children,
  time,
  ...props
}) => {
  return (
    <div
      className={classnames(
        'flex mx-auto w-full flex-col justify-between',
        parentClassName
      )}
    >
      <div className="flex mx-auto text-center">
        {time[0] !== '0' && (
          <div
            children={time[0]}
            className={classnames(
              'bg-cool-13 md:text-scale-3 lg:text-scale-7 font-500 rounded-5 ml-1',
              timerIndicatorStyle.content
            )}
          />
        )}
        <div
          children={time[1]}
          className={classnames(
            'bg-cool-13 md:text-scale-3 lg:text-scale-7 font-500 rounded-5 ml-1',
            timerIndicatorStyle.content
          )}
        />
        <div
          children={time[2]}
          className="md:text-scale-3 lg:text-scale-7 font-500 md:w-5 md:h-5 lg:w-10 lg:h-10 ml-1"
        />
        <div
          children={time[3]}
          className={classnames(
            'bg-cool-13 md:text-scale-3 lg:text-scale-7 font-500 rounded-5 ml-1',
            timerIndicatorStyle.content
          )}
        />
        <div
          children={time[4]}
          className={classnames(
            'bg-cool-13 md:text-scale-3 lg:text-scale-7 font-500 rounded-5 ml-1',
            timerIndicatorStyle.content
          )}
        />
      </div>
      <div
        className={classnames(
          'md:text-14px lg:text-16px text-cool-5 w-full p-1 mx-auto text-center',
          contentClassName
        )}
      >
        {children}
      </div>
    </div>
  );
};

export default TimerIndicator;