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

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>