28 lines
840 B
TypeScript
28 lines
840 B
TypeScript
interface Props {
|
|
total: number;
|
|
completed: number;
|
|
inline?: boolean;
|
|
}
|
|
|
|
export default function CompletionBar(props: Props) {
|
|
const progress = (props.completed / props.total) * 100;
|
|
return (
|
|
<span
|
|
className={`w-full h-2 bg-red-400 ${
|
|
props.inline ? 'inline-block' : 'block'
|
|
} relative overflow-hidden rounded-full`}
|
|
role='progressbar'
|
|
aria-valuenow={props.completed}
|
|
aria-valuemin={0}
|
|
aria-valuemax={props.total}
|
|
>
|
|
<span
|
|
className='w-full h-2 absolute top-0 left-0 block bg-green-400'
|
|
style={{
|
|
transform: `translateX(-${100 - progress}%)`,
|
|
transformOrigin: 'left center',
|
|
}}
|
|
/>
|
|
</span>
|
|
);
|
|
}
|