feat: add user image to ParticipantListEntry component
This commit is contained in:
parent
44a75ff12e
commit
10080b8513
2 changed files with 8 additions and 4 deletions
|
@ -148,6 +148,7 @@ export default function ShowEvent() {
|
||||||
<ParticipantListEntry
|
<ParticipantListEntry
|
||||||
key={user.user.id}
|
key={user.user.id}
|
||||||
participant={user.user.name}
|
participant={user.user.name}
|
||||||
|
imageSrc={user.user.image}
|
||||||
></ParticipantListEntry>
|
></ParticipantListEntry>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -6,19 +6,22 @@ import { useTheme } from 'next-themes';
|
||||||
|
|
||||||
type ParticipantListEntryProps = {
|
type ParticipantListEntryProps = {
|
||||||
participant: string;
|
participant: string;
|
||||||
imageSrc?: string;
|
imageSrc?: string | null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function ParticipantListEntry({
|
export default function ParticipantListEntry({
|
||||||
participant,
|
participant,
|
||||||
|
imageSrc,
|
||||||
}: ParticipantListEntryProps) {
|
}: ParticipantListEntryProps) {
|
||||||
const { resolvedTheme } = useTheme();
|
const { resolvedTheme } = useTheme();
|
||||||
|
const defaultImage =
|
||||||
const iconSrc =
|
|
||||||
resolvedTheme === 'dark' ? user_default_dark : user_default_light;
|
resolvedTheme === 'dark' ? user_default_dark : user_default_light;
|
||||||
|
|
||||||
|
const finalImageSrc = imageSrc ?? defaultImage;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='flex items-center gap-2 py-1 ml-5'>
|
<div className='flex items-center gap-2 py-1 ml-5'>
|
||||||
<Image src={iconSrc} alt='Avatar' width={30} height={30} />
|
<Image src={finalImageSrc} alt='Avatar' width={30} height={30} />
|
||||||
<span>{participant}</span>
|
<span>{participant}</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue