From 4df2d844ca415b41e7384b00f23edd812debd885 Mon Sep 17 00:00:00 2001
From: Daniel Bedeleanu <daniel.bedeleanu@emag.ro>
Date: Wed, 15 Apr 2026 11:15:38 +0300
Subject: [PATCH] feat: create reusable StatCard component with responsive
 layout

---
 frontend/components/StatCard.tsx | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 frontend/components/StatCard.tsx

diff --git a/frontend/components/StatCard.tsx b/frontend/components/StatCard.tsx
new file mode 100644
index 00000000..5387ce01
--- /dev/null
+++ b/frontend/components/StatCard.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface StatCardProps {
+  label: string;
+  value: number;
+  icon?: LucideIcon;
+}
+
+export default function StatCard({ label, value, icon: Icon }: StatCardProps) {
+  return (
+    <div className="flex justify-between items-center gap-2 p-4 bg-slate-900 rounded-lg">
+      {/* Icon + Label Container */}
+      <div className="flex items-center gap-2 min-w-0">
+        {Icon && <Icon className="w-5 h-5 text-primary flex-shrink-0" />}
+        <span className="text-sm md:text-base text-slate-400 truncate">
+          {label}
+        </span>
+      </div>
+
+      {/* Number (Right) */}
+      <span className="text-lg md:text-xl font-black text-white whitespace-nowrap">
+        {value}
+      </span>
+    </div>
+  );
+}