diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/ProgressBar.js | 26 |
1 files changed, 26 insertions, 0 deletions
diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js new file mode 100644 index 00000000..cdb55205 --- /dev/null +++ b/src/components/ProgressBar.js @@ -0,0 +1,26 @@ +import { CheckIcon } from "@heroicons/react/24/outline"; +import { CheckCircleIcon } from "@heroicons/react/24/solid"; + +const ProgressBar = ({ current, labels }) => { + return ( + <div className="bg-gray_r-1 flex gap-x-2 p-4 rounded-md"> + {labels.map((label, index) => ( + <> + <div className={"flex gap-x-2 items-center " + (index < current ? 'text-gray_r-12' : 'text-gray_r-11')} key={index}> + <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> + ) } + </> + ))} + </div> + ) +} + +export default ProgressBar;
\ No newline at end of file |