7ddcd7afb6
All checks were successful
Build Frontend / build (push) Successful in 1m10s
Refined color scheme in AnimatedStatsSection to use indigo instead of pink, and improved gradient backgrounds. In dashboard/content.tsx, updated TopProduct price to support arrays and display revenue per product. UnifiedNotifications received minor style and layout adjustments for better consistency and usability.
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-indigo-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
<div className="relative flex flex-col items-center">
|
|
<Package className="h-6 w-6 text-indigo-500" />
|
|
<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-indigo-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
<div className="relative flex flex-col items-center">
|
|
<Users className="h-6 w-6 text-indigo-500" />
|
|
<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-indigo-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
<div className="relative flex flex-col items-center">
|
|
<CreditCard className="h-6 w-6 text-indigo-500" />
|
|
<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>
|
|
);
|
|
}
|