src/components/ProgressBar.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import { Fragment } from "react";

const ProgressBar = ({ current, labels }) => {
  return (
    <div className="bg-gray_r-1 flex gap-x-2 p-4 rounded-md">
      {labels.map((label, index) => (
        <Fragment key={index}>
          <div className={"flex gap-x-2 items-center " + (index < current ? 'text-gray_r-12' : 'text-gray_r-11')}>
            <div className={"leading-none p-2 rounded-full w-7 text-center text-caption-2 " + (index < current ? 'bg-yellow_r-9' : 'bg-gray_r-6')}>
              { index + 1 }
            </div>
            <p className="font-medium text-caption-2">{ label }</p>
          </div>
          { index < (labels.length - 1) && (
            <div className="flex-1 flex items-center">
              <div className="h-0.5 w-full bg-gray_r-7"></div>
            </div>
          ) }
        </Fragment>
      ))}
    </div>
  )
}

export default ProgressBar;