80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { Package, Users, CreditCard } from "lucide-react";
|
|
import { AnimatedCounter } from "./animated-counter";
|
|
import { PlatformStats } from "@/lib/stats-service";
|
|
|
|
const formatCurrency = (value: number) => {
|
|
return new Intl.NumberFormat('en-GB', {
|
|
style: 'currency',
|
|
currency: 'GBP',
|
|
minimumFractionDigits: 0,
|
|
}).format(value);
|
|
};
|
|
|
|
interface AnimatedStatsProps {
|
|
stats: PlatformStats;
|
|
}
|
|
|
|
export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
|
|
return (
|
|
<div className="mx-auto grid max-w-5xl grid-cols-1 gap-8 md:grid-cols-3 mt-8">
|
|
<div className="flex flex-col items-center space-y-2 rounded-lg border border-zinc-800 p-6 transition-all hover:bg-zinc-800">
|
|
<div className="rounded-full bg-zinc-900 p-3 text-[#D53F8C]">
|
|
<Package className="h-8 w-8" />
|
|
</div>
|
|
<div className="text-3xl font-bold text-white">
|
|
<AnimatedCounter
|
|
value={stats.orders.completed}
|
|
duration={2000}
|
|
suffix="+"
|
|
/>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-white">
|
|
Completed Orders
|
|
</h3>
|
|
<p className="text-center text-zinc-400">
|
|
Successfully fulfilled orders across our platform
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center space-y-2 rounded-lg border border-zinc-800 p-6 transition-all hover:bg-zinc-800">
|
|
<div className="rounded-full bg-zinc-900 p-3 text-[#D53F8C]">
|
|
<Users className="h-8 w-8" />
|
|
</div>
|
|
<div className="text-3xl font-bold text-white">
|
|
<AnimatedCounter
|
|
value={stats.vendors.total}
|
|
duration={2000}
|
|
suffix="+"
|
|
/>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-white">
|
|
Registered Vendors
|
|
</h3>
|
|
<p className="text-center text-zinc-400">
|
|
Active sellers offering products on our marketplace
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center space-y-2 rounded-lg border border-zinc-800 p-6 transition-all hover:bg-zinc-800">
|
|
<div className="rounded-full bg-zinc-900 p-3 text-[#D53F8C]">
|
|
<CreditCard className="h-8 w-8" />
|
|
</div>
|
|
<div className="text-3xl font-bold text-white">
|
|
<AnimatedCounter
|
|
value={stats.transactions.volume}
|
|
duration={2500}
|
|
formatter={formatCurrency}
|
|
/>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-white">
|
|
Transaction Volume
|
|
</h3>
|
|
<p className="text-center text-zinc-400">
|
|
Total value of successful transactions processed
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|