chore: replace GuildLogo by Avatar (#1395)

* chore: replace GuildLogo by Avatar * chore: add svg sizing feature to Avatar * chore(css): add image bg and shrink svg more * chore: replace GuildLogo by Avatar in Account * chore: remove props from NextImage * chore: remove unused import * fix(GuildCard): Avatar `alt` attribute * fix(SharedSocials): image size * cleanup(Avatar): remove `shrinkSvg` prop * fix: preload banner properly * cleanup: remove the `Preload` component --------- Co-authored-by: BrickheadJohnny <[email protected]>
guildxyz · Jul 16, 2024 · 27906ae · 27906ae
1 parent d68cc51
commit 27906ae
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 131 deletions.
diff --git a/src/app/explorer/_components/Preload.tsx b/src/app/explorer/_components/Preload.tsx
diff --git a/src/app/explorer/page.tsx b/src/app/explorer/page.tsx
@@ -6,9 +6,14 @@ import { SearchParams } from "types"
 import { Explorer } from "./_components/Explorer"
 import { ExplorerSWRProvider } from "./_components/ExplorerSWRProvider"
 import { HeaderBackground } from "./_components/HeaderBackground"
-import { PreloadResources } from "./_components/Preload"
 import { ActiveSection } from "./types"
 
+export const metadata = {
+  icons: {
+    other: [{ rel: "preload", url: "/banner.png" }],
+  },
+}
+
 const Page = async ({ searchParams }: { searchParams: SearchParams }) => {
   const featuredPath = `/v2/guilds?order=FEATURED&offset=0&limit=24`
   const newestPath = `/v2/guilds?order=NEWEST&offset=0&limit=24`
@@ -30,57 +35,53 @@ const Page = async ({ searchParams }: { searchParams: SearchParams }) => {
   ])
 
   return (
-    <>
-      <PreloadResources />
-
-      <ExplorerSWRProvider
-        value={{
-          fallback: {
-            [infinite_unstable_serialize(() => featuredPath)]: ssrFeaturedGuilds,
-            [infinite_unstable_serialize(() => newestPath)]: ssrNewestGuilds,
-          },
-        }}
-      >
-        <HeaderBackground />
-        <Layout.Root>
-          <Layout.Hero>
-            <Layout.Header />
-            <div id={ActiveSection.YourGuilds}>
-              <Layout.Headline title="Guildhall" />
-            </div>
-            <Layout.Banner>
-              <div className="absolute inset-0 bg-[auto_115%] bg-[right_top_10px] bg-[url('/banner.png')] bg-no-repeat opacity-10" />
-              <div className="absolute inset-0 bg-gradient-to-tr from-50% from-banner to-transparent" />
-            </Layout.Banner>
-          </Layout.Hero>
+    <ExplorerSWRProvider
+      value={{
+        fallback: {
+          [infinite_unstable_serialize(() => featuredPath)]: ssrFeaturedGuilds,
+          [infinite_unstable_serialize(() => newestPath)]: ssrNewestGuilds,
+        },
+      }}
+    >
+      <HeaderBackground />
+      <Layout.Root>
+        <Layout.Hero>
+          <Layout.Header />
+          <div id={ActiveSection.YourGuilds}>
+            <Layout.Headline title="Guildhall" />
+          </div>
+          <Layout.Banner>
+            <div className="absolute inset-0 bg-[auto_115%] bg-[right_top_10px] bg-[url('/banner.png')] bg-no-repeat opacity-10" />
+            <div className="absolute inset-0 bg-gradient-to-tr from-50% from-banner to-transparent" />
+          </Layout.Banner>
+        </Layout.Hero>
 
-          <Layout.Main>
-            <Explorer searchParams={searchParams} />
-          </Layout.Main>
+        <Layout.Main>
+          <Explorer searchParams={searchParams} />
+        </Layout.Main>
 
-          <Layout.Footer>
-            <p className="my-8 text-center text-muted-foreground text-sm">
-              {`This website is `}
-              <Anchor
-                href="https://github.com/guildxyz/guild.xyz"
-                target="_blank"
-                showExternal
-              >
-                open source
-              </Anchor>
-              {`, and built on the `}
-              <Anchor
-                target="_blank"
-                href="https://www.npmjs.com/package/@guildxyz/sdk"
-                showExternal
-              >
-                Guild SDK
-              </Anchor>
-            </p>
-          </Layout.Footer>
-        </Layout.Root>
-      </ExplorerSWRProvider>
-    </>
+        <Layout.Footer>
+          <p className="my-8 text-center text-muted-foreground text-sm">
+            {`This website is `}
+            <Anchor
+              href="https://github.com/guildxyz/guild.xyz"
+              target="_blank"
+              showExternal
+            >
+              open source
+            </Anchor>
+            {`, and built on the `}
+            <Anchor
+              target="_blank"
+              href="https://www.npmjs.com/package/@guildxyz/sdk"
+              showExternal
+            >
+              Guild SDK
+            </Anchor>
+          </p>
+        </Layout.Footer>
+      </Layout.Root>
+    </ExplorerSWRProvider>
   )
 }
 

diff --git a/src/v2/components/Account/components/AccountModal/components/SharedSocials.tsx b/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}

diff --git a/src/v2/components/GuildCard.tsx b/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}

diff --git a/src/v2/components/GuildLogo.tsx b/src/v2/components/GuildLogo.tsx
diff --git a/src/v2/components/ui/Avatar.tsx b/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<