108 lines
3.1 KiB
TypeScript
108 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import StatCard from './StatCard';
|
|
|
|
interface StatsProps {
|
|
stats: {
|
|
totalProducts?: number;
|
|
totalVendors?: number;
|
|
totalOrders?: number;
|
|
totalCustomers?: number;
|
|
gmv?: number;
|
|
};
|
|
}
|
|
|
|
function formatNumberValue(num: number = 0): string {
|
|
return new Intl.NumberFormat().format(Math.round(num));
|
|
}
|
|
|
|
function formatCurrencyValue(amount: number = 0): string {
|
|
return new Intl.NumberFormat('en-GB', {
|
|
style: 'currency',
|
|
currency: 'GBP',
|
|
maximumFractionDigits: 0
|
|
}).format(amount);
|
|
}
|
|
|
|
export default function StatsSection({ stats }: StatsProps) {
|
|
useEffect(() => {
|
|
console.log('StatsSection rendering with data:', stats);
|
|
}, [stats]);
|
|
|
|
const totalProducts = stats?.totalProducts ?? 243;
|
|
const totalVendors = stats?.totalVendors ?? 15;
|
|
const totalOrders = stats?.totalOrders ?? 1289;
|
|
const totalCustomers = stats?.totalCustomers ?? 756;
|
|
const gmv = stats?.gmv ?? 38450;
|
|
|
|
// Container animation variants
|
|
const containerVariants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.1
|
|
}
|
|
}
|
|
};
|
|
|
|
// Item animation variants
|
|
const itemVariants = {
|
|
hidden: { y: 20, opacity: 0 },
|
|
visible: {
|
|
y: 0,
|
|
opacity: 1,
|
|
transition: {
|
|
type: "spring",
|
|
stiffness: 260,
|
|
damping: 20
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="perspective-1000">
|
|
<motion.div
|
|
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 sm:gap-6"
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate="visible"
|
|
style={{ perspective: "1000px" }}
|
|
>
|
|
<motion.div variants={itemVariants} className="group">
|
|
<StatCard
|
|
title="Total Products"
|
|
value={formatNumberValue(totalProducts)}
|
|
className="h-32 group-hover:shadow-[0_0_30px_rgba(213,63,140,0.3)] transition-all duration-300"
|
|
/>
|
|
</motion.div>
|
|
|
|
<motion.div variants={itemVariants} className="group">
|
|
<StatCard
|
|
title="Total Vendors"
|
|
value={formatNumberValue(totalVendors)}
|
|
className="h-32 group-hover:shadow-[0_0_30px_rgba(213,63,140,0.3)] transition-all duration-300"
|
|
/>
|
|
</motion.div>
|
|
|
|
<motion.div variants={itemVariants} className="group">
|
|
<StatCard
|
|
title="Total Orders"
|
|
value={formatNumberValue(totalOrders)}
|
|
className="h-32 group-hover:shadow-[0_0_30px_rgba(213,63,140,0.3)] transition-all duration-300"
|
|
/>
|
|
</motion.div>
|
|
|
|
<motion.div variants={itemVariants} className="sm:col-span-2 lg:col-span-1 group">
|
|
<StatCard
|
|
title="Revenue"
|
|
value={formatCurrencyValue(gmv)}
|
|
className="h-32 bg-gradient-to-br from-pink-900/40 to-gray-900 border-pink-800/30 group-hover:shadow-[0_0_30px_rgba(213,63,140,0.4)] transition-all duration-300"
|
|
/>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|