From abe288fe6d94216d1023519e05f63659314bf69e Mon Sep 17 00:00:00 2001
From: Jonatan <jonatan@jontes.page>
Date: Sat, 19 Oct 2024 05:28:06 +0200
Subject: [PATCH] Introduce avatarservice (#8)

---
 app/[slug]/page.tsx                        | 5 +----
 components/ProfileAvatar/ProfileAvatar.tsx | 9 +++------
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/app/[slug]/page.tsx b/app/[slug]/page.tsx
index e946408..1959337 100644
--- 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
index e8b2abe..3b9a0db 100644
--- 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=""