feat: update icon my content

components/main/my-content.tsx

@@ -4,7 +4,17 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { Search, Filter, ChevronLeft, ChevronRight } from "lucide-react";
+import {
+  Search,
+  Filter,
+  ChevronLeft,
+  ChevronRight,
+  FileText,
+  FilePenLine,
+  Clock3,
+  CheckCircle2,
+  XCircle,
+} from "lucide-react";
 import Link from "next/link";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import Cookies from "js-cookie";
@@ -268,28 +278,54 @@ export default function MyContent() {
 
       <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
         {[
-          { title: "Total Content", value: stats.total, color: "bg-blue-500" },
-          { title: "Drafts", value: stats.draft, color: "bg-slate-600" },
-          { title: "Pending", value: stats.pending, color: "bg-yellow-500" },
-          { title: "Approved", value: stats.approved, color: "bg-green-600" },
+          {
+            title: "Total Content",
+            value: stats.total,
+            color: "bg-blue-500",
+            icon: FileText,
+          },
+          {
+            title: "Drafts",
+            value: stats.draft,
+            color: "bg-slate-600",
+            icon: FilePenLine,
+          },
+          {
+            title: "Pending",
+            value: stats.pending,
+            color: "bg-yellow-500",
+            icon: Clock3,
+          },
+          {
+            title: "Approved",
+            value: stats.approved,
+            color: "bg-green-600",
+            icon: CheckCircle2,
+          },
           {
             title: "Revision/Rejected",
             value: stats.rejected,
             color: "bg-red-600",
+            icon: XCircle,
           },
-        ].map((item) => (
+        ].map((item) => {
+          const Icon = item.icon;
+          return (
           <Card key={item.title} className="rounded-2xl shadow-sm">
             <CardContent className="p-5 flex items-center gap-4">
               <div
                 className={`w-12 h-12 rounded-xl flex items-center justify-center text-white shrink-0 ${item.color}`}
-              />
+              >
+                <Icon className="w-6 h-6" />
+              </div>
               <div>
                 <p className="text-2xl font-bold text-slate-900">{item.value}</p>
                 <p className="text-sm text-muted-foreground">{item.title}</p>
               </div>
             </CardContent>
           </Card>
-        ))}
+          );
+        })}
       </div>
 
       <div className="flex flex-col md:flex-row gap-3 md:items-center md:justify-between">