65 lines
No EOL
2.2 KiB
TypeScript
65 lines
No EOL
2.2 KiB
TypeScript
import { cn } from '@/lib/utils';
|
|
|
|
interface Milestone {
|
|
target: number;
|
|
description: string;
|
|
created_at: string;
|
|
}
|
|
|
|
interface ProgressBarProps {
|
|
currentShares: number;
|
|
milestones: Milestone[];
|
|
className?: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export default function ProgressBar({
|
|
currentShares,
|
|
milestones,
|
|
className,
|
|
onClick
|
|
}: ProgressBarProps) {
|
|
// Get the first milestone (lowest target) for progress calculation
|
|
const firstMilestone = milestones.length > 0 ? milestones[0] : null;
|
|
|
|
// Calculate progress percentage
|
|
const progressPercentage = firstMilestone
|
|
? Math.min((currentShares / firstMilestone.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">
|
|
{/* 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 */}
|
|
{firstMilestone && (
|
|
<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>
|
|
);
|
|
} |