polynux
/
pchl-astro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use fallback avatar from dicebear if no avatar set

This commit is contained in:
Guillaume Dorce 2024-02-04 16:17:33 +01:00
parent a6351250cf
commit 78ef06fbae
1 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/Members/Avatar.tsx
View File

@ -1,14 +1,21 @@
import type { UsersResponse } from "../../types/pb_types";
export default function Avatar({author}: {author: UsersResponse}) {
console.log(author);
if (!author) return null;
const avatarUrl = import.meta.env.PUBLIC_PB_API + `/api/files/${author.collectionId}/${author.id}/${author.avatar}?thumb=100x100`;
type AvatarProps = {
avatarUrl?: string;
firstName: string;
lastName: string;
}
export default function Avatar({avatarUrl, firstName, lastName}: AvatarProps) {
if (avatarUrl !== undefined) {
return (
<img src={avatarUrl} alt={`${firstName} ${lastName}`} className="rounded-full border-2 border-gray-200 h-full" />
)
}
const avatar = `https://api.dicebear.com/7.x/adventurer/svg?flip=true&seed=${firstName}+${lastName}`;
return (
<div className="flex items-center p-4 border-b-2 border-gray-200 max-h-[6rem]">
<img src={avatarUrl} alt="Profile" className="rounded-full border-2 border-gray-200 h-full" />
<p className="ml-2 text-center flex-grow capitalize">{author.firstname} {author.lastname}</p>
</div>
<img src={avatar} alt="Profile" className="rounded-full border-2 border-gray-200 h-20" />
)
}