??

components/3d/StatsSection.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import React 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) {
+  const { totalProducts = 0, totalVendors = 0, totalOrders = 0, totalCustomers = 0, gmv = 0 } = stats;
+
+  // 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}>
+          <StatCard title="Total Products" value={formatNumberValue(totalProducts)} className="h-32" />
+        </motion.div>
+        
+        <motion.div variants={itemVariants}>
+          <StatCard title="Total Vendors" value={formatNumberValue(totalVendors)} className="h-32" />
+        </motion.div>
+        
+        <motion.div variants={itemVariants}>
+          <StatCard title="Total Orders" value={formatNumberValue(totalOrders)} className="h-32" />
+        </motion.div>
+        
+        <motion.div variants={itemVariants} className="sm:col-span-2 lg:col-span-1">
+          <StatCard title="Revenue" value={formatCurrencyValue(gmv)} className="h-32 bg-gradient-to-br from-pink-900/40 to-gray-900 border-pink-800/30" />
+        </motion.div>
+      </motion.div>
+    </div>
+  );
+}