67 lines
No EOL
2.3 KiB
TypeScript
67 lines
No EOL
2.3 KiB
TypeScript
import { cn } from '@/lib/utils';
|
|
|
|
interface Milestone {
|
|
target: number;
|
|
description: string;
|
|
created_at: string;
|
|
}
|
|
|
|
interface ProgressBarProps {
|
|
currentQuantity: number;
|
|
milestones: Milestone[];
|
|
selectedMilestoneIndex?: number;
|
|
className?: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export default function ProgressBar({
|
|
currentQuantity,
|
|
milestones,
|
|
selectedMilestoneIndex = 0,
|
|
className,
|
|
onClick
|
|
}: ProgressBarProps) {
|
|
const selectedMilestone = milestones.length > 0 && selectedMilestoneIndex < milestones.length
|
|
? milestones[selectedMilestoneIndex]
|
|
: null;
|
|
|
|
const progressPercentage = selectedMilestone
|
|
? Math.min((currentQuantity / selectedMilestone.target) * 100, 100)
|
|
: 0;
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"bg-black cursor-pointer",
|
|
"transition-all duration-300",
|
|
"p-8",
|
|
className
|
|
)}
|
|
onClick={onClick}
|
|
>
|
|
{/* Progress Bar Container */}
|
|
<div className="w-full">
|
|
{/* Old-school progress bar with overlaid text */}
|
|
<div className="w-full border-4 border-red-500 p-2 bg-black relative overflow-hidden glow-red">
|
|
{/* Inner container */}
|
|
<div className="relative h-8">
|
|
{/* Progress fill */}
|
|
<div
|
|
className="absolute top-0 left-0 h-full bg-red-500 transition-all duration-500 ease-out"
|
|
style={{ width: `${progressPercentage}%` }}
|
|
/>
|
|
|
|
{/* Text overlay */}
|
|
{selectedMilestone && (
|
|
<div className="relative h-full flex items-center justify-center">
|
|
{/* Base text (red on black background) */}
|
|
<div className="text-red-500 font-mono text-sm font-bold mix-blend-difference relative z-10">
|
|
{progressPercentage.toFixed(1)}%
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |