Fix the big number
This commit is contained in:
parent
896ad15321
commit
2ea5107106
2 changed files with 35 additions and 77 deletions
|
|
@ -8,97 +8,53 @@ interface LedDisplayProps {
|
|||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export default function LedDisplay({
|
||||
value,
|
||||
className,
|
||||
animate = true,
|
||||
export default function LedDisplay({
|
||||
value,
|
||||
className,
|
||||
onClick
|
||||
}: LedDisplayProps) {
|
||||
const [displayValue, setDisplayValue] = useState(0);
|
||||
|
||||
// Animate number changes
|
||||
useEffect(() => {
|
||||
if (!animate) {
|
||||
setDisplayValue(value);
|
||||
return;
|
||||
}
|
||||
setDisplayValue(value);
|
||||
return;
|
||||
}, [value]);
|
||||
|
||||
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
|
||||
// Format number with zero-padding for consistent width
|
||||
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+$/, '');
|
||||
// Always pad to 5 digits for consistent display width
|
||||
const integerPart = Math.floor(value);
|
||||
return integerPart.toString().padStart(5, '0');
|
||||
};
|
||||
|
||||
|
||||
const formattedValue = formatValue(displayValue);
|
||||
|
||||
return (
|
||||
<div
|
||||
<div
|
||||
className={cn(
|
||||
"font-mono text-center select-none cursor-pointer",
|
||||
"w-full text-center select-none 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",
|
||||
"px-8 py-12 transition-all duration-300",
|
||||
className
|
||||
)}
|
||||
onClick={onClick}
|
||||
>
|
||||
<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="relative w-full flex items-center justify-center">
|
||||
<div className={cn(
|
||||
"relative z-10",
|
||||
"text-6xl md:text-8xl lg:text-9xl",
|
||||
"font-digital font-normal tracking-widest",
|
||||
"text-[8rem] md:text-[12rem] lg:text-[16rem]",
|
||||
"font-digital font-normal",
|
||||
"text-red-500",
|
||||
"drop-shadow-[0_0_10px_rgba(239,68,68,0.8)]",
|
||||
"filter brightness-110"
|
||||
)}>
|
||||
"filter brightness-110",
|
||||
"leading-none",
|
||||
"transition-all duration-300"
|
||||
)}
|
||||
style={{ letterSpacing: '0.15em' }}>
|
||||
{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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -128,16 +128,18 @@ export default function Dashboard() {
|
|||
<Head title="VWCE Tracker" />
|
||||
|
||||
{/* Stacked Layout */}
|
||||
<div className="min-h-screen bg-black flex items-center justify-center">
|
||||
<div className="w-full max-w-4xl mx-4 space-y-4">
|
||||
{/* Box 1: LED Number Display */}
|
||||
<LedDisplay
|
||||
value={purchaseData.total_shares}
|
||||
onClick={handleLedClick}
|
||||
/>
|
||||
<div className="min-h-screen bg-black">
|
||||
<div className="w-full max-w-4xl mx-auto px-4">
|
||||
{/* Box 1: LED Number Display - Fixed position from top */}
|
||||
<div className="pt-32">
|
||||
<LedDisplay
|
||||
value={purchaseData.total_shares}
|
||||
onClick={handleLedClick}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Box 2: Progress Bar (toggleable) */}
|
||||
<div style={{ display: showProgressBar ? 'block' : 'none' }}>
|
||||
<div className="mt-4" style={{ display: showProgressBar ? 'block' : 'none' }}>
|
||||
<ProgressBar
|
||||
value={purchaseData.total_shares}
|
||||
onClick={handleProgressClick}
|
||||
|
|
@ -145,7 +147,7 @@ export default function Dashboard() {
|
|||
</div>
|
||||
|
||||
{/* Box 3: Stats Box (toggleable) */}
|
||||
<div style={{ display: showStatsBox ? 'block' : 'none' }}>
|
||||
<div className="mt-4" style={{ display: showStatsBox ? 'block' : 'none' }}>
|
||||
<StatsBox
|
||||
stats={statsData}
|
||||
onAddPurchase={() => setActiveForm('purchase')}
|
||||
|
|
@ -154,7 +156,7 @@ export default function Dashboard() {
|
|||
</div>
|
||||
|
||||
{/* Box 4: Forms (only when active form is set) */}
|
||||
<div style={{ display: activeForm ? 'block' : 'none' }}>
|
||||
<div className="mt-4" style={{ display: activeForm ? 'block' : 'none' }}>
|
||||
<InlineForm
|
||||
type={activeForm}
|
||||
onClose={() => setActiveForm(null)}
|
||||
|
|
|
|||
Loading…
Reference in a new issue