49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import clsx from 'clsx';
|
|
interface Segment {
|
|
percentage: number;
|
|
subtitle: string;
|
|
color: string;
|
|
}
|
|
interface SegmentedProgressBarProps {
|
|
segments: Segment[];
|
|
height?: number;
|
|
className?: string;
|
|
}
|
|
const SegmentedProgressBar: React.FC<SegmentedProgressBarProps> = ({ segments, height=15, className="" }) => {
|
|
return (
|
|
<div className={className}>
|
|
<div className="relative flex rounded-full overflow-hidden bg-gray-200" style={{height: `${height}px`}}>
|
|
{segments.map((segment, index) => (
|
|
<div
|
|
key={index}
|
|
className={clsx(
|
|
'h-full opacity-50',
|
|
'transition-all duration-500 ease-out',
|
|
`bg-${segment.color}`,
|
|
{
|
|
'rounded-l-full': index === 0,
|
|
'rounded-r-full': index === segments.length - 1,
|
|
'rounded-none': index !== 0 && index !== segments.length - 1
|
|
}
|
|
)}
|
|
style={{width: `${segment.percentage}%`}}
|
|
></div>
|
|
))}
|
|
</div>
|
|
<div className="mt-2 flex text-sm justify-between">
|
|
{segments.map((segment, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex flex-col text-center w-fit"
|
|
>
|
|
<span className={clsx('font-semibold',`text-${segment.color}`)}>{segment.subtitle}</span>
|
|
<span>{`${segment.percentage}%`}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
export default SegmentedProgressBar;
|