show person image

Author: coder13

src/containers/PersonalSchedule/PersonHeader.tsx

@@ -4,11 +4,15 @@ import { hasFlag } from 'country-flag-icons';
 import getUnicodeFlagIcon from 'country-flag-icons/unicode';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 import { Button, ExternalLink, LinkButton } from '@/components';
 import { usePinnedPersons } from '@/hooks/UsePinnedPersons';
 import { useWcaLiveCompetitorLink } from '@/hooks/queries/useWcaLive';
 import { useWCIF } from '@/providers/WCIFProvider';
 
+const fallbackAvatarUrl =
+  'https://assets.worldcubeassociation.org/assets/326cd49/assets/missing_avatar_thumb-d77f478a307a91a9d4a083ad197012a391d5410f6dd26cb0b0e3118a5de71438.png';
+
 export interface PersonHeaderProps {
   competitionId;
   person: Person;
@@ -40,37 +44,55 @@ export const PersonHeader: React.FC<PersonHeaderProps> = ({ person }) => {
     ];
   }, [person.registration?.eventIds, person.roles]);
 
+  const avatarUrl = person?.avatar?.thumbUrl || person?.avatar?.url || fallbackAvatarUrl;
+
+  const avatar = <img src={avatarUrl} alt={person.name} className="w-24 h-24 object-contain" />;
+
   return (
     <>
-      <div className="flex flex-shrink items-center w-full space-x-1 min-h-10 px-1">
-        {hasFlag(person.countryIso2) && (
-          <div className="flex flex-shrink text-lg sm:text-xl mx-1">
-            {getUnicodeFlagIcon(person.countryIso2)}
-          </div>
+      <div className="flex space-x-1 px-1">
+        {person.wcaId ? (
+          <Link to={`https://worldcubeassociation.org/persons/${person.wcaId}`} target="_blank">
+            {avatar}
+          </Link>
+        ) : (
+          avatar
         )}
-        <h3 className="text-xl sm:text-2xl">{person.name}</h3>
-        <div className="flex-grow" />
-        <span className="text-xl sm:text-2xl">{person.registrantId}</span>
-        <Button
-          className="bg-blue-200"
-          onClick={() => {
-            if (isPinned) {
-              unpinPerson(person.registrantId);
-            } else {
-              pinPerson(person.registrantId);
-            }
-          }}>
-          <PinIcon pinned={isPinned} />
-        </Button>
-      </div>
-      {person.wcaId && <span className="px-1">{person.wcaId}</span>}
-      <div className="px-1">
-        <p className="text-sm sm:text-md">
-          <span>{t('competition.personalSchedule.registeredEvents')}:</span>
-          {registeredEventIconClassNames.map((eventId) => (
-            <span key={eventId} className={classNames(`cubing-icon ${eventId} mx-1 text-lg`)} />
-          ))}
-        </p>
+        <div className="flex flex-col w-full">
+          <div className="flex flex-shrink items-center w-full space-x-1">
+            <h3 className="text-xl sm:text-2xl">{person.name}</h3>
+            <div className="flex-grow" />
+            <span className="text-xl sm:text-2xl">{person.registrantId}</span>
+            <Button
+              className="bg-blue-200 min-h-10"
+              onClick={() => {
+                if (isPinned) {
+                  unpinPerson(person.registrantId);
+                } else {
+                  pinPerson(person.registrantId);
+                }
+              }}>
+              <PinIcon pinned={isPinned} />
+            </Button>
+          </div>
+          <div className="flex space-x-1 align-center">
+            {hasFlag(person.countryIso2) && (
+              <div className="flex flex-shrink text-lg sm:text-xl">
+                {getUnicodeFlagIcon(person.countryIso2)}
+              </div>
+            )}
+
+            {person.wcaId && <span className="text-sm sm:text-md my-1">{person.wcaId}</span>}
+          </div>
+          <div className="px-1">
+            <p className="text-sm sm:text-md">
+              <span>{t('competition.personalSchedule.registeredEvents')}:</span>
+              {registeredEventIconClassNames.map((eventId) => (
+                <span key={eventId} className={classNames(`cubing-icon ${eventId} mx-1 text-lg`)} />
+              ))}
+            </p>
+          </div>
+        </div>
       </div>
       {person.wcaId && (
         <>

src/containers/PersonalSchedule/PersonalSchedule.tsx

@@ -21,7 +21,7 @@ export function PersonalScheduleContainer({ person }: PersonalScheduleContainerP
       <PersonHeader competitionId={competitionId} person={person} />
 
       <hr className="my-2" />
-      <DisclaimerText />
+      <DisclaimerText className="mx-1" />
       <hr className="my-2" />
 
       {wcif && (

src/pages/Competition/Information/UserRow.tsx

@@ -1,4 +1,6 @@
 export const UserRow = ({ user }: { user: User }) => {
+  const avatarUrl = user.avatar?.thumb_url;
+
   return (
     <li className="w-full rounded flex border border-slate-400 space-x-2 justify-between hover:bg-slate-100 hover:border-slate-500 shadow transition-all">
       <a
@@ -7,7 +9,7 @@ export const UserRow = ({ user }: { user: User }) => {
         href={user.wca_id && `https://www.worldcubeassociation.org/persons/${user.wca_id}`}
         target="_blank"
         rel="noreferrer">
-        <img className="w-16 h-16 rounded-l" src={user.avatar?.thumb_url} alt={user.name} />
+        <img className="w-16 h-16 rounded-l object-contain" src={avatarUrl} alt={user.name} />
         <div className="flex flex-1 flex-col px-2">
           <span className="text-xl">{user.name}</span>
           <span className="text-xs">{user.wca_id}</span>