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