60 lines
No EOL
1.8 KiB
TypeScript
60 lines
No EOL
1.8 KiB
TypeScript
import { cn } from '@/lib/utils';
|
|
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
|
|
interface ProgressBarProps {
|
|
value: number;
|
|
className?: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export default function ProgressBar({
|
|
value,
|
|
className,
|
|
onClick
|
|
}: ProgressBarProps) {
|
|
const [currentMilestoneIndex, setCurrentMilestoneIndex] = useState(0);
|
|
|
|
// Milestone definitions
|
|
const milestones = [
|
|
{ target: 1500, label: '1.5K', color: 'bg-blue-500' },
|
|
{ target: 3000, label: '3K', color: 'bg-green-500' },
|
|
{ target: 4500, label: '4.5K', color: 'bg-yellow-500' },
|
|
{ target: 6000, label: '6K', color: 'bg-red-500' },
|
|
];
|
|
|
|
const currentMilestone = milestones[currentMilestoneIndex];
|
|
const progress = Math.min((value / currentMilestone.target) * 100, 100);
|
|
const isCompleted = value >= currentMilestone.target;
|
|
|
|
// Milestone navigation
|
|
const nextMilestone = () => {
|
|
setCurrentMilestoneIndex((prev) =>
|
|
prev < milestones.length - 1 ? prev + 1 : 0
|
|
);
|
|
};
|
|
|
|
const prevMilestone = () => {
|
|
setCurrentMilestoneIndex((prev) =>
|
|
prev > 0 ? prev - 1 : milestones.length - 1
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"bg-black border-4 border-gray-800 rounded-lg",
|
|
"shadow-2xl shadow-red-500/20 cursor-pointer",
|
|
"transition-all duration-300",
|
|
"hover:shadow-red-500/40 hover:border-red-600",
|
|
"p-8 text-center",
|
|
className
|
|
)}
|
|
onClick={onClick}
|
|
>
|
|
<div className="text-red-500 text-2xl font-mono tracking-wide">
|
|
PROGRESS BAR
|
|
</div>
|
|
</div>
|
|
);
|
|
} |