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

app/pages/dashboard-contents/index.tsx

@@ -72,7 +72,7 @@ export const ContentsPage = () => {
     2: (value: TAuthorResponse) => (
       <>
         <div>{value.name}</div>
-        <div className="text-sm text-[#7C7C7C]">ID: {value.id.slice(0, 8)}</div>
+        <div className="text-xs text-[#7C7C7C]">ID: {value.id.slice(0, 8)}</div>
       </>
     ),
     3: (value: string) => <span className="text-sm">{value}</span>,

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>
     ),
   }

app/pages/dashboard-users/index.tsx

@@ -55,7 +55,7 @@ export const UsersPage = () => {
     2: (_value: unknown, _type: unknown, data: TUserResponse) => (
       <div>
         <div>{data.email}</div>
-        <div className="text-sm text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
+        <div className="text-xs text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
       </div>
     ),
     3: (value: string) => <span>{value}</span>,