19 lines
560 B
TypeScript
19 lines
560 B
TypeScript
interface ProgressBarProps {
|
|
progress: number;
|
|
onSeek: (ratio: number) => void;
|
|
}
|
|
|
|
export function ProgressBar({ progress, onSeek }: ProgressBarProps) {
|
|
return (
|
|
<div
|
|
className="relative h-1.5 rounded-full bg-white/25 overflow-hidden cursor-pointer"
|
|
onClick={(e) => {
|
|
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
|
onSeek((e.clientX - rect.left) / rect.width);
|
|
}}
|
|
>
|
|
<div className="origin-left h-full bg-white" style={{ transform: `scaleX(${progress || 0})` }} />
|
|
</div>
|
|
);
|
|
}
|