forked from 77media/video-flow
30 lines
912 B
TypeScript
30 lines
912 B
TypeScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
|
|
interface ProgressBarProps {
|
|
progress: number;
|
|
color?: string;
|
|
label?: string;
|
|
}
|
|
|
|
export const ProgressBar: React.FC<ProgressBarProps> = ({ progress, color = '#10b981', label }) => {
|
|
return (
|
|
<div className="w-full">
|
|
<div className="relative h-2 bg-black/30 rounded-full overflow-hidden">
|
|
<motion.div
|
|
className="absolute top-0 left-0 h-full rounded-full"
|
|
style={{ backgroundColor: color }}
|
|
initial={{ width: 0 }}
|
|
animate={{ width: `${progress}%` }}
|
|
transition={{ duration: 0.5 }}
|
|
/>
|
|
</div>
|
|
{label && (
|
|
<div className="flex justify-between items-center mt-1">
|
|
<span className="text-xs text-gray-400">{label}</span>
|
|
<span className="text-xs" style={{ color }}>{progress}%</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|