comicbox/components/CompletionBar.tsx

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>
    );
}