refactor: remove ProfileIcon component and update image handling for author profiles

app/pages/dashboard-staffs/index.tsx

@@ -39,9 +39,21 @@ export const StaffsPage = () => {
   ]
   const dataSlot: DataTableSlots = {
     1: (_value: unknown, _type: unknown, data: TStaffResponse) => (
-      <div>
-        <div>{data.name}</div>
-        <div className="text-sm text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
+      <div className="flex items-center gap-x-2">
+        <img
+          src={data?.profile_picture || '/images/profile-placeholder.svg'}
+          onError={(event) => {
+            event.currentTarget.src = '/images/profile-placeholder.svg'
+          }}
+          alt={data?.name}
+          className="size-8 rounded-full bg-[#C4C4C4] object-cover"
+        />
+        <div>
+          <div>{data.name}</div>
+          <div className="text-xs text-[#7C7C7C]">
+            ID: {data.id.slice(0, 8)}
+          </div>
+        </div>
       </div>
     ),
   }