Clean up old files
This commit is contained in:
parent
ce6b6e00c5
commit
dce7571109
1 changed files with 0 additions and 312 deletions
|
|
@ -1,312 +0,0 @@
|
||||||
import { cn } from '@/lib/utils';
|
|
||||||
import { ChevronLeft, ChevronRight, Plus } from 'lucide-react';
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
|
|
||||||
interface LedCounterProps {
|
|
||||||
value: number;
|
|
||||||
className?: string;
|
|
||||||
animate?: boolean;
|
|
||||||
currentPrice?: number;
|
|
||||||
onHover?: (isHovered: boolean) => void;
|
|
||||||
// Progress bar props
|
|
||||||
onStatsToggle?: () => void;
|
|
||||||
showStats?: boolean;
|
|
||||||
onAddPurchase?: () => void;
|
|
||||||
onAddMilestone?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function LedCounter({
|
|
||||||
value,
|
|
||||||
className,
|
|
||||||
animate = true,
|
|
||||||
currentPrice,
|
|
||||||
onHover,
|
|
||||||
onStatsToggle,
|
|
||||||
showStats = false,
|
|
||||||
onAddPurchase,
|
|
||||||
onAddMilestone
|
|
||||||
}: LedCounterProps) {
|
|
||||||
const [displayValue, setDisplayValue] = useState(0);
|
|
||||||
const [isHovered, setIsHovered] = useState(false);
|
|
||||||
const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>(null);
|
|
||||||
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
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleProgressBarClick = () => {
|
|
||||||
if (onStatsToggle) {
|
|
||||||
onStatsToggle();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Animate number changes
|
|
||||||
useEffect(() => {
|
|
||||||
if (!animate) {
|
|
||||||
setDisplayValue(value);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const duration = 1000; // 1 second animation
|
|
||||||
const steps = 60; // 60fps
|
|
||||||
const stepValue = (value - displayValue) / steps;
|
|
||||||
|
|
||||||
if (Math.abs(stepValue) < 0.01) {
|
|
||||||
setDisplayValue(value);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const timer = setInterval(() => {
|
|
||||||
setDisplayValue(prev => {
|
|
||||||
const next = prev + stepValue;
|
|
||||||
if (Math.abs(next - value) < Math.abs(stepValue)) {
|
|
||||||
clearInterval(timer);
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
return next;
|
|
||||||
});
|
|
||||||
}, duration / steps);
|
|
||||||
|
|
||||||
return () => clearInterval(timer);
|
|
||||||
}, [value, displayValue, animate]);
|
|
||||||
|
|
||||||
// Format number appropriately for shares
|
|
||||||
const formatValue = (value: number) => {
|
|
||||||
// If it's a whole number, show it as integer
|
|
||||||
if (value % 1 === 0) {
|
|
||||||
return value.toString();
|
|
||||||
}
|
|
||||||
// Otherwise show up to 6 decimal places, removing trailing zeros
|
|
||||||
return value.toFixed(6).replace(/\.?0+$/, '');
|
|
||||||
};
|
|
||||||
|
|
||||||
const formattedValue = formatValue(displayValue);
|
|
||||||
|
|
||||||
const formatCurrency = (amount: number) => {
|
|
||||||
return new Intl.NumberFormat('de-DE', {
|
|
||||||
style: 'currency',
|
|
||||||
currency: 'EUR',
|
|
||||||
minimumFractionDigits: 4,
|
|
||||||
}).format(amount);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
"font-mono text-center select-none relative group cursor-pointer",
|
|
||||||
"bg-black text-red-500",
|
|
||||||
"border-4 border-gray-800 rounded-lg",
|
|
||||||
"shadow-2xl shadow-red-500/20",
|
|
||||||
"p-8 transition-all duration-300",
|
|
||||||
"hover:shadow-red-500/40 hover:border-red-600",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
onMouseEnter={() => {
|
|
||||||
if (hoverTimeout) {
|
|
||||||
clearTimeout(hoverTimeout);
|
|
||||||
setHoverTimeout(null);
|
|
||||||
}
|
|
||||||
setIsHovered(true);
|
|
||||||
if (onHover) onHover(true);
|
|
||||||
}}
|
|
||||||
onMouseLeave={() => {
|
|
||||||
// Delay hiding to allow moving to progress bar
|
|
||||||
const timeout = setTimeout(() => {
|
|
||||||
setIsHovered(false);
|
|
||||||
if (onHover) onHover(false);
|
|
||||||
}, 300); // 300ms delay
|
|
||||||
setHoverTimeout(timeout);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="relative">
|
|
||||||
{/* Background glow effect */}
|
|
||||||
<div className="absolute inset-0 text-red-500/20 blur-sm font-digital text-6xl md:text-8xl lg:text-9xl tracking-widest">
|
|
||||||
{formattedValue}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Main LED text */}
|
|
||||||
<div className={cn(
|
|
||||||
"relative z-10",
|
|
||||||
"text-6xl md:text-8xl lg:text-9xl",
|
|
||||||
"font-digital font-normal tracking-widest",
|
|
||||||
"text-red-500",
|
|
||||||
"drop-shadow-[0_0_10px_rgba(239,68,68,0.8)]",
|
|
||||||
"filter brightness-110"
|
|
||||||
)}>
|
|
||||||
{formattedValue}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Subtle scan line effect */}
|
|
||||||
<div className="absolute inset-0 pointer-events-none">
|
|
||||||
<div className="h-full w-full bg-gradient-to-b from-transparent via-red-500/5 to-transparent animate-pulse" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Label */}
|
|
||||||
<div className="mt-4 text-red-400/80 text-sm md:text-base font-mono-display tracking-wider">
|
|
||||||
total shares
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Hover overlay with price and add button */}
|
|
||||||
<div className={cn(
|
|
||||||
"absolute inset-0 bg-black/90 backdrop-blur-sm",
|
|
||||||
"flex flex-col items-center justify-center",
|
|
||||||
"transition-all duration-300",
|
|
||||||
"rounded-lg z-50",
|
|
||||||
isHovered ? "opacity-100" : "opacity-0 pointer-events-none"
|
|
||||||
)}>
|
|
||||||
{/* Current Price Display */}
|
|
||||||
{currentPrice ? (
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-red-400/70 text-sm font-medium tracking-wide mb-2">
|
|
||||||
current price
|
|
||||||
</div>
|
|
||||||
<div className="text-red-500 text-4xl md:text-6xl font-mono-display tracking-wider">
|
|
||||||
{formatCurrency(currentPrice)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="text-red-400/50 text-sm font-medium">
|
|
||||||
no price data
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Progress Bar - shows when hovered */}
|
|
||||||
<div className={cn(
|
|
||||||
"absolute bottom-0 left-0 right-0",
|
|
||||||
"bg-black/90 backdrop-blur-sm",
|
|
||||||
"border-t border-red-500/30",
|
|
||||||
"transition-all duration-300 transform",
|
|
||||||
"z-[60]", // Higher than hover overlay z-50
|
|
||||||
isHovered ? "translate-y-0 opacity-100" : "translate-y-full opacity-0",
|
|
||||||
)}>
|
|
||||||
<div className="relative">
|
|
||||||
{/* Progress Bar */}
|
|
||||||
<div
|
|
||||||
className="h-2 bg-gray-800 cursor-pointer relative overflow-hidden"
|
|
||||||
onClick={handleProgressBarClick}
|
|
||||||
>
|
|
||||||
{/* Background pulse for completed milestones */}
|
|
||||||
{isCompleted && (
|
|
||||||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-pulse" />
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Progress fill */}
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
"h-full transition-all duration-1000 ease-out",
|
|
||||||
currentMilestone.color,
|
|
||||||
"shadow-lg",
|
|
||||||
isCompleted ? "animate-pulse" : ""
|
|
||||||
)}
|
|
||||||
style={{ width: `${progress}%` }}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Glow effect */}
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
"absolute top-0 h-full transition-all duration-1000 ease-out",
|
|
||||||
"bg-gradient-to-r from-transparent to-white/30",
|
|
||||||
"blur-sm"
|
|
||||||
)}
|
|
||||||
style={{ width: `${Math.min(progress + 10, 100)}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Milestone Info */}
|
|
||||||
<div className="flex items-center justify-between px-4 py-2">
|
|
||||||
{/* Left: Previous milestone button */}
|
|
||||||
<button
|
|
||||||
onClick={prevMilestone}
|
|
||||||
className="text-red-400 hover:text-red-300 transition-colors p-1"
|
|
||||||
aria-label="Previous milestone"
|
|
||||||
>
|
|
||||||
<ChevronLeft className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Center: Milestone info */}
|
|
||||||
<div className="flex items-center space-x-4 text-center">
|
|
||||||
<div className="text-red-400 text-sm font-mono">
|
|
||||||
{value.toFixed(2)} / {currentMilestone.target}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-red-500 font-bold text-sm">
|
|
||||||
{currentMilestone.label}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-red-400 text-sm">
|
|
||||||
{isCompleted ? 'COMPLETED' : `${(100 - progress).toFixed(1)}% TO GO`}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Right: Add Purchase, Add Milestone, Next milestone button and stats toggle */}
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
{/* Add Purchase Button */}
|
|
||||||
{onAddPurchase && (
|
|
||||||
<button
|
|
||||||
onClick={onAddPurchase}
|
|
||||||
className="flex items-center space-x-1 px-2 py-1 rounded bg-red-600/20 border border-red-500/50 text-red-400 hover:bg-red-600/40 hover:text-red-300 transition-colors text-xs"
|
|
||||||
aria-label="Add purchase"
|
|
||||||
>
|
|
||||||
<Plus className="w-3 h-3" />
|
|
||||||
<span className="font-mono">ADD</span>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Add Milestone Button */}
|
|
||||||
{onAddMilestone && (
|
|
||||||
<button
|
|
||||||
onClick={onAddMilestone}
|
|
||||||
className="flex items-center space-x-1 px-2 py-1 rounded bg-blue-600/20 border border-blue-500/50 text-blue-400 hover:bg-blue-600/40 hover:text-blue-300 transition-colors text-xs"
|
|
||||||
aria-label="Add milestone"
|
|
||||||
>
|
|
||||||
<Plus className="w-3 h-3" />
|
|
||||||
<span className="font-mono">MILE</span>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={nextMilestone}
|
|
||||||
className="text-red-400 hover:text-red-300 transition-colors p-1"
|
|
||||||
aria-label="Next milestone"
|
|
||||||
>
|
|
||||||
<ChevronRight className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Stats indicator */}
|
|
||||||
<div className={cn(
|
|
||||||
"text-xs text-red-400/60 cursor-pointer transition-colors",
|
|
||||||
showStats && "text-red-400"
|
|
||||||
)}>
|
|
||||||
{showStats ? '▲' : '▼'}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Loading…
Reference in a new issue