Introduce avatarservice (#8)

v3xlabs · Oct 19, 2024 · abe288f · abe288f
1 parent b34aba0
commit abe288f
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 10 deletions.
diff --git a/app/[slug]/page.tsx b/app/[slug]/page.tsx
@@ -54,10 +54,7 @@ export default async function ({
                 <div className="w-full flex flex-col gap-2 items-center justify-center">
                     <div className="flex items-center relative w-full pt-8 pb-2">
                         <div className="mx-auto w-40 h-40 aspect-square border bg-white rounded-full overflow-hidden">
-                            <ProfileAvatar
-                                name={enstate.name}
-                                avatar={enstate.avatar}
-                            />
+                            <ProfileAvatar name={enstate.name} />
                         </div>
                         {event == 'frensday2023' && (
                             <div className="absolute inset-0">

diff --git a/components/ProfileAvatar/ProfileAvatar.tsx b/components/ProfileAvatar/ProfileAvatar.tsx
@@ -5,10 +5,7 @@ import { FC, useMemo, useState } from 'react';
 
 import { generateMeshGradientFromName } from './MeshGradient';
 
-export const ProfileAvatar: FC<{ name: string; avatar?: string }> = ({
-    name,
-    avatar,
-}) => {
+export const ProfileAvatar: FC<{ name: string }> = ({ name }) => {
     const [failedToLoad, setFailedToLoad] = useState(false);
     const mesh = useMemo(() => generateMeshGradientFromName(name), [name]);
 
@@ -17,9 +14,9 @@ export const ProfileAvatar: FC<{ name: string; avatar?: string }> = ({
             <div className="bg-ens-light-background-secondary absolute inset-0 size-full"></div>
             <div className="absolute inset-0 size-full" style={mesh}></div>
             <img
-                src={avatar || 'https://enstate.rs/i/' + name}
+                src={'https://avatarservice.xyz/256/' + name + '.webp'}
                 className={clsx(
-                    'avatar-image absolute inset-0 size-full',
+                    'avatar-image absolute inset-0 size-full h-full w-full object-cover',
                     failedToLoad && 'hidden'
                 )}
                 alt=""