27 lines
1.1 KiB
TypeScript
27 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { Eye, Home, Clock, Tv2 } from 'lucide-react';
|
|
import type { Stat } from '@/lib/api';
|
|
|
|
const items = [
|
|
{ key: 'owlCount', label: 'Owls Tracked', icon: Eye, unit: '' },
|
|
{ key: 'burrowCount', label: 'Active Burrows', icon: Home, unit: '' },
|
|
{ key: 'volunteerHours', label: 'Volunteer Hours', icon: Clock, unit: 'hrs' },
|
|
{ key: 'activeStreams', label: 'Live Cams', icon: Tv2, unit: '' },
|
|
] as const;
|
|
|
|
export default function StatsBar({ stats }: { stats: Stat }) {
|
|
return (
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-px bg-white/5 rounded-2xl overflow-hidden border border-white/5">
|
|
{items.map(({ key, label, icon: Icon, unit }) => (
|
|
<div key={key} className="bg-surfaceGreen px-6 py-7 flex flex-col items-center text-center gap-2">
|
|
<Icon size={22} className="text-teal opacity-80" />
|
|
<div className="text-3xl font-black text-gold tabular-nums">
|
|
{stats[key].toLocaleString()}{unit}
|
|
</div>
|
|
<div className="text-xs font-semibold text-stone-400 uppercase tracking-widest">{label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|