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