feat: use avatar

src/components/home/HomeFeed.tsx

@@ -13,8 +13,8 @@ import { Switch } from "@headlessui/react"
 import { CharacterFloatCard } from "~/components/common/CharacterFloatCard"
 import { Titles } from "~/components/common/Titles"
 import PostCover from "~/components/home/PostCover"
+import { Avatar } from "~/components/ui/Avatar"
 import { EmptyState } from "~/components/ui/EmptyState"
-import { Image } from "~/components/ui/Image"
 import { Skeleton } from "~/components/ui/Skeleton"
 import { Tabs } from "~/components/ui/Tabs"
 import { Tooltip } from "~/components/ui/Tooltip"
@@ -83,14 +83,11 @@ const PostCard = ({
               }}
             >
               <span className="w-5 h-5 sm:w-6 sm:h-6 inline-block">
-                <Image
-                  className="rounded-full object-cover"
-                  src={
-                    character?.metadata?.content?.avatars?.[0] || DEFAULT_AVATAR
-                  }
-                  alt={character?.handle || ""}
-                  fill
-                ></Image>
+                <Avatar
+                  images={character?.metadata?.content?.avatars || []}
+                  size={24}
+                  name={character?.metadata?.content?.name}
+                ></Avatar>
               </span>
               <span className="font-medium truncate">
                 {character?.metadata?.content?.name || character?.handle}

src/components/home/HomeSidebar.tsx

@@ -4,9 +4,8 @@ import { useState } from "react"
 
 import { CharacterFloatCard } from "~/components/common/CharacterFloatCard"
 import { SearchInput } from "~/components/common/SearchInput"
-import { Image } from "~/components/ui/Image"
+import { Avatar } from "~/components/ui/Avatar"
 import { UniLink } from "~/components/ui/UniLink"
-import { DEFAULT_AVATAR } from "~/lib/env"
 import { getSiteLink } from "~/lib/helpers"
 import { useTranslation } from "~/lib/i18n/client"
 import { useGetShowcase } from "~/queries/home"
@@ -58,16 +57,11 @@ export function HomeSidebar({ hideSearch }: { hideSearch?: boolean }) {
                 >
                   <CharacterFloatCard siteId={site.handle}>
                     <span className="w-10 h-10 inline-block">
-                      <Image
-                        className="rounded-full object-cover"
-                        src={
-                          site?.metadata?.content?.avatars?.[0] ||
-                          DEFAULT_AVATAR
-                        }
-                        alt={site.handle}
-                        width="40"
-                        height="40"
-                      ></Image>
+                      <Avatar
+                        images={site?.metadata?.content?.avatars || []}
+                        size={40}
+                        name={site?.metadata?.content?.name}
+                      ></Avatar>
                     </span>
                   </CharacterFloatCard>
                   <span className="ml-3 min-w-0 flex-1 justify-center inline-flex flex-col">

src/components/home/PostModal.tsx

@@ -12,7 +12,7 @@ export default function PostModal({
   handle,
   children,
 }: {
-  handle: string
+  handle?: string
   children: JSX.Element
 }) {
   const router = useRouter()
@@ -42,7 +42,7 @@ export default function PostModal({
         <UniLink
           className="block"
           href={getSiteLink({
-            subdomain: handle,
+            subdomain: handle || "",
           })}
           target="_blank"
         >

src/components/ui/Avatar.tsx

@@ -45,7 +45,7 @@ export const Avatar = ({
       <span
         {...props}
         className={cn(
-          `inline-flex text-white bg-gray-400 items-center justify-center text-xl font-medium uppercase flex-shrink-0`,
+          `inline-flex text-white bg-gray-400 items-center justify-center text-xl font-medium uppercase flex-shrink-0 max-w-full max-h-full`,
           borderRadius,
           className,
         )}
@@ -64,7 +64,7 @@ export const Avatar = ({
     <span
       {...props}
       className={cn(
-        `inline-flex text-zinc-500 flex-shrink-0 items-center justify-center text-xl font-medium uppercase overflow-hidden text-[0px]`,
+        `inline-flex text-zinc-500 flex-shrink-0 items-center justify-center text-xl font-medium uppercase overflow-hidden text-[0px] max-w-full max-h-full`,
         borderRadius,
         className,
       )}