79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { estimatePlatformFunds } from '@/lib/fundingCalculation'
|
|
import { t } from '@/lib/i18n'
|
|
|
|
interface FundingProgressBarProps {
|
|
progressPercent: number
|
|
}
|
|
|
|
function FundingProgressBar({ progressPercent }: FundingProgressBarProps) {
|
|
return (
|
|
<div className="relative w-full h-4 bg-cyber-dark rounded-full overflow-hidden border border-neon-cyan/30">
|
|
<div
|
|
className="absolute top-0 left-0 h-full bg-gradient-to-r from-neon-cyan to-neon-green transition-all duration-500"
|
|
style={{ width: `${progressPercent}%` }}
|
|
/>
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<span className="text-xs font-mono text-cyber-darker font-bold">
|
|
{progressPercent.toFixed(1)}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function FundingStats({ stats }: { stats: ReturnType<typeof estimatePlatformFunds> }) {
|
|
const progressPercent = Math.min(100, stats.progressPercent)
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-cyber-accent">{t('home.funding.current', { current: stats.totalBTC.toFixed(6) })}</span>
|
|
<span className="text-cyber-accent">{t('home.funding.target', { target: stats.targetBTC.toFixed(2) })}</span>
|
|
</div>
|
|
<FundingProgressBar progressPercent={progressPercent} />
|
|
<p className="text-xs text-cyber-accent/70">
|
|
{t('home.funding.progress', { percent: progressPercent.toFixed(1) })}
|
|
</p>
|
|
<p className="text-sm text-cyber-accent mt-4">
|
|
{t('home.funding.description')}
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function FundingGauge() {
|
|
const [stats, setStats] = useState(estimatePlatformFunds())
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
// In a real implementation, this would fetch actual data
|
|
// For now, we use the estimate
|
|
const loadStats = async () => {
|
|
try {
|
|
const fundingStats = estimatePlatformFunds()
|
|
setStats(fundingStats)
|
|
} catch (e) {
|
|
console.error('Error loading funding stats:', e)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
void loadStats()
|
|
}, [])
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="bg-cyber-dark/50 border border-neon-cyan/20 rounded-lg p-6 mb-8">
|
|
<p className="text-cyber-accent">{t('common.loading')}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="bg-cyber-dark/50 border border-neon-cyan/20 rounded-lg p-6 mb-8">
|
|
<h2 className="text-xl font-semibold text-neon-cyan mb-4">{t('home.funding.title')}</h2>
|
|
<FundingStats stats={stats} />
|
|
</div>
|
|
)
|
|
}
|