chore: replace GuildLogo by Avatar

src/v2/components/Account/components/AccountModal/components/SharedSocials.tsx

@@ -1,16 +1,5 @@
-import { type Icon } from "@phosphor-icons/react"
-import {
-  ArrowSquareOut,
-  CaretDown,
-  Check,
-  Shield,
-  ShieldCheck,
-} from "@phosphor-icons/react/dist/ssr"
-import useGuild, { useSimpleGuild } from "components/[guild]/hooks/useGuild"
-import useUser from "components/[guild]/hooks/useUser"
-
-import { GuildLogo } from "@/components/GuildLogo"
 import { anchorVariants } from "@/components/ui/Anchor"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar"
 import { Button, ButtonProps } from "@/components/ui/Button"
 import {
   Dialog,
@@ -32,6 +21,16 @@ import { Separator } from "@/components/ui/Separator"
 import { Skeleton } from "@/components/ui/Skeleton"
 import { cn } from "@/lib/utils"
 import { UserProfile } from "@guildxyz/types"
+import { type Icon } from "@phosphor-icons/react"
+import {
+  ArrowSquareOut,
+  CaretDown,
+  Check,
+  Shield,
+  ShieldCheck,
+} from "@phosphor-icons/react/dist/ssr"
+import useGuild, { useSimpleGuild } from "components/[guild]/hooks/useGuild"
+import useUser from "components/[guild]/hooks/useUser"
 import { Fragment, useEffect } from "react"
 import pluralize from "utils/pluralize"
 import useEditSharedSocials from "../hooks/useEditSharedSocials"
@@ -159,12 +158,12 @@ const ShareSocialsWithGuildSelect = ({
 
   return (
     <div className="flex items-center gap-4">
-      {imageUrl ? (
-        <GuildLogo imageUrl={imageUrl} className="size-9" />
-      ) : (
-        <Skeleton className="size-9 shrink-0 rounded-full" />
-      )}
-
+      <Avatar className="size-9">
+        <AvatarImage src={imageUrl} alt="guild logo" width={36} height={36} />
+        <AvatarFallback>
+          <Skeleton className="size-full" />
+        </AvatarFallback>
+      </Avatar>
       {name?.length > 0 ? (
         <span className="overflow-hidden text-ellipsis font-bold text-lg">
           {name}

src/v2/components/GuildCard.tsx

@@ -1,8 +1,8 @@
 import { CircleWavyCheck, Users } from "@phosphor-icons/react"
 import { GuildBase } from "types"
 import pluralize from "utils/pluralize"
-import { GuildLogo } from "./GuildLogo"
 import { Anchor } from "./ui/Anchor"
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/Avatar"
 import { Badge } from "./ui/Badge"
 import { Card } from "./ui/Card"
 import { Skeleton } from "./ui/Skeleton"
@@ -19,7 +19,17 @@ type Props = {
 
 export const GuildCard: React.FC<Props> = ({ guildData }) => (
   <Card className="relative grid grid-cols-[auto,1fr] grid-rows-2 items-center gap-x-4 gap-y-1 px-6 py-7 before:absolute before:inset-0 before:bg-secondary before:opacity-0 before:transition-opacity before:duration-200 before:content-[''] hover:before:opacity-55 active:before:opacity-85">
-    <GuildLogo imageUrl={guildData.imageUrl} className="row-span-2" />
+    <Avatar className="row-span-2 size-12">
+      <AvatarImage
+        src={guildData.imageUrl}
+        alt={`${guildData.name} logo`}
+        width={48}
+        height={48}
+      />
+      <AvatarFallback>
+        <Skeleton className="size-full" />
+      </AvatarFallback>
+    </Avatar>
     <div className="flex items-center">
       <h3 className="max-w-36 truncate font-bold font-display text-foreground text-lg tracking-wide">
         {guildData.name}

src/v2/components/ui/Avatar.tsx

@@ -2,6 +2,7 @@
 
 import { cn } from "@/lib/utils"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import NextImage from "next/image"
 import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
 
 const Avatar = forwardRef<
@@ -11,24 +12,41 @@ const Avatar = forwardRef<
   <AvatarPrimitive.Root
     ref={ref}
     className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      "relative flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-image",
       className
     )}
     {...props}
   />
 ))
 Avatar.displayName = AvatarPrimitive.Root.displayName
 
+export interface AvatarImageProps
+  extends ComponentPropsWithoutRef<typeof NextImage> {}
+
 const AvatarImage = forwardRef<
   ElementRef<typeof AvatarPrimitive.Image>,
-  ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={cn("aspect-square h-full w-full object-cover", className)}
-    {...props}
-  />
-))
+  AvatarImageProps
+>(({ className, src, ...props }, ref) => {
+  return (
+    <AvatarPrimitive.Image
+      className={cn(
+        "aspect-square h-full w-full object-cover",
+        {
+          "size-[40%]": typeof src === "string" && src.match("guildLogos"),
+        },
+        className
+      )}
+      asChild
+      // @ts-expect-error: Since the props are passed down, type errors on `AvatarPrimitive` is not relevant.
+      src={src}
+      ref={ref}
+      {...props}
+    >
+      {/* @ts-expect-error: Required props are already enforced and passed down to `NextImage`. */}
+      <NextImage />
+    </AvatarPrimitive.Image>
+  )
+})
 AvatarImage.displayName = AvatarPrimitive.Image.displayName
 
 const AvatarFallback = forwardRef<