Update index.tsx

src/components/atoms/StatCard/index.tsx

@@ -1,8 +1,10 @@
+// src/components/atoms/StatCard/index.tsx
 "use client";
 
 import React from "react";
+import { LucideProps } from "lucide-react";
 
-/** Utility to merge classNames */
+/** Utility to merge class names */
 function cn(...classes: (string | undefined | false | null)[]) {
   return classes.filter(Boolean).join(" ");
 }
@@ -11,20 +13,15 @@ function cn(...classes: (string | undefined | false | null)[]) {
 export interface StatCardProps {
   title: string;
   value: string;
-  icon: React.ComponentType<{ size?: number }>; // Works with Lucide icons like BookOpen, Tag, Edit3
+  icon: React.ComponentType<LucideProps>; // Works with Lucide icons
 }
 
-/** Standalone StatCard component with named export */
+/** Standalone StatCard component */
 export const StatCard: React.FC<StatCardProps> = ({ title, value, icon: Icon }) => {
   return (
-    <div
-      className={cn(
-        "flex items-center gap-4 rounded-lg border p-4 bg-white shadow-sm",
-        "transition hover:shadow-md"
-      )}
-    >
+    <div className={cn("flex items-center gap-4 rounded-lg border p-4 bg-white shadow-sm")}>
       <div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100 text-blue-600">
-        <Icon size={20} /> {/* Lucide icons are now fully type-safe */}
+        <Icon size={20} /> {/* ✅ Works with Lucide icons */}
       </div>
       <div className="flex flex-col">
         <span className="text-sm font-medium text-gray-500">{title}</span>