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

app/components/icons/profile.tsx

@@ -1,23 +0,0 @@
-import type { JSX, SVGProps } from 'react'
-
-export const ProfileIcon = (
-  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
-) => {
-  return (
-    <svg
-      width={18}
-      height={19}
-      viewBox="0 0 18 19"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...properties}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12.97 5.82A3.956 3.956 0 019 9.789a3.956 3.956 0 01-3.97-3.97A3.955 3.955 0 019 1.853a3.955 3.955 0 013.97 3.968zM9 16.852c-3.253 0-6-.53-6-2.57s2.764-2.55 6-2.55c3.254 0 6 .529 6 2.569s-2.764 2.55-6 2.55z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}

app/components/ui/news-author.tsx

@@ -1,5 +1,4 @@
 import type { TAuthorResponse } from '~/apis/common/get-news'
-import { ProfileIcon } from '~/components/icons/profile'
 import { formatDate } from '~/utils/formatter'
 
 type TDetailNewsAuthor = {
@@ -11,15 +10,14 @@ type TDetailNewsAuthor = {
 export const NewsAuthor = ({ author, live_at, text }: TDetailNewsAuthor) => {
   return (
     <div className="mb-2 flex items-center gap-2 align-middle">
-      {author?.profile_picture ? (
-        <img
-          src={author?.profile_picture}
-          alt={author?.name}
-          className="size-12 rounded-full bg-[#C4C4C4] object-cover"
-        />
-      ) : (
-        <ProfileIcon className="size-12 rounded-full bg-[#C4C4C4]" />
-      )}
+      <img
+        src={author?.profile_picture || '/images/profile-placeholder.svg'}
+        onError={(event) => {
+          event.currentTarget.src = '/images/profile-placeholder.svg'
+        }}
+        alt={author?.name}
+        className="size-12 rounded-full bg-[#C4C4C4] object-cover"
+      />
 
       <div>
         <h4 className="text-md">{author?.name}</h4>

app/layouts/admin/navbar.tsx

@@ -6,7 +6,6 @@ import {
 import { ChevronDownIcon } from '@heroicons/react/24/solid'
 import { Link, useFetcher, useRouteLoaderData } from 'react-router'
 
-import { ProfileIcon } from '~/components/icons/profile'
 import { Button } from '~/components/ui/button'
 import { APP } from '~/configs/meta'
 import { useAdminContext } from '~/contexts/admin'
@@ -34,15 +33,17 @@ export const Navbar = () => {
         <Popover className="relative">
           <PopoverButton className="flex w-3xs cursor-pointer items-center justify-between rounded-xl p-2 ring-1 ring-[#707FDD]/10 hover:shadow focus:outline-none">
             <div className="flex items-center space-x-3">
-              {staffData?.profile_picture ? (
-                <img
-                  src={staffData?.profile_picture}
-                  alt={staffData?.name}
-                  className="size-8 rounded-full bg-[#C4C4C4] object-cover"
-                />
-              ) : (
-                <ProfileIcon className="size-8 rounded-full bg-[#C4C4C4]" />
-              )}
+              <img
+                src={
+                  staffData?.profile_picture ||
+                  '/images/profile-placeholder.svg'
+                }
+                onError={(event) => {
+                  event.currentTarget.src = '/images/profile-placeholder.svg'
+                }}
+                alt={staffData?.name}
+                className="size-8 rounded-full bg-[#C4C4C4] object-cover"
+              />
 
               <span className="text-sm">{staffData?.name}</span>
             </div>

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

public/images/profile-placeholder.svg

@@ -0,0 +1,6 @@
+<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg"
+  class="size-8 rounded-full bg-[#C4C4C4]">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M12.97 5.82A3.956 3.956 0 019 9.789a3.956 3.956 0 01-3.97-3.97A3.955 3.955 0 019 1.853a3.955 3.955 0 013.97 3.968zM9 16.852c-3.253 0-6-.53-6-2.57s2.764-2.55 6-2.55c3.254 0 6 .529 6 2.569s-2.764 2.55-6 2.55z"
+    fill="currentColor"></path>
+</svg>