feat: GuildImage component

guildxyz · Nov 26, 2024 · 008047f · 008047f
1 parent 4393710
commit 008047f
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 56 deletions.
diff --git a/src/app/(dashboard)/[guildId]/layout.tsx b/src/app/(dashboard)/[guildId]/layout.tsx
@@ -1,4 +1,4 @@
-import { DashboardContainer } from "@/components/DashboardContainer";
+import { GuildImage } from "@/components/GuildImage";
 import { Button } from "@/components/ui/Button";
 import { ScrollArea, ScrollBar } from "@/components/ui/ScrollArea";
 import { env } from "@/lib/env";
@@ -24,49 +24,45 @@ const GuildPage = async ({
   const roleGroups = paginatedRoleGroup.items;
 
   return (
-    <DashboardContainer>
-      <main className="py-16">
-        <div className="flex flex-col items-stretch md:flex-row md:justify-between">
-          <div className="w-full space-y-4">
-            <div className="flex w-full flex-col items-stretch justify-between gap-8 md:flex-row md:items-center">
-              <div className="flex max-w-prose items-center gap-4">
-                <img
-                  src={guild.imageUrl}
-                  className="size-20 rounded-full border"
-                  alt="avatar"
-                />
-                <h1 className="text-pretty font-bold font-display text-3xl tracking-tight sm:text-4xl lg:text-5xl">
-                  {guild.name}
-                </h1>
-              </div>
-              <Button colorScheme="success" size="lg">
-                Join Guild
-              </Button>
+    <main className="py-16">
+      <div className="flex flex-col items-stretch md:flex-row md:justify-between">
+        <div className="w-full space-y-4">
+          <div className="flex w-full flex-col items-stretch justify-between gap-8 md:flex-row md:items-center">
+            <div className="flex max-w-prose items-center gap-4">
+              <GuildImage
+                name={guild.name}
+                imageUrl={guild.imageUrl}
+                className="size-20 rounded-full border"
+              />
+              <h1 className="text-pretty font-bold font-display text-3xl tracking-tight sm:text-4xl lg:text-5xl">
+                {guild.name}
+              </h1>
             </div>
-            <p className="line-clamp-3 max-w-prose text-balance text-lg leading-relaxed">
-              {guild.description}
-            </p>
+            <Button colorScheme="success">Join Guild</Button>
           </div>
+          <p className="line-clamp-3 max-w-prose text-balance text-lg leading-relaxed">
+            {guild.description}
+          </p>
         </div>
+      </div>
 
-        <ScrollArea>
-          <div className="mt-32 mb-3 flex gap-3">
-            {roleGroups.map((rg) => (
-              <RoleGroupNavLink
-                key={rg.id}
-                tab={{
-                  path: `/${guildIdParam}/${rg.urlName}`,
-                  segment: rg.urlName,
-                  label: rg.name,
-                }}
-              />
-            ))}
-          </div>
-          <ScrollBar orientation="horizontal" />
-        </ScrollArea>
-        {children}
-      </main>
-    </DashboardContainer>
+      <ScrollArea>
+        <div className="mt-32 mb-3 flex gap-3">
+          {roleGroups.map((rg) => (
+            <RoleGroupNavLink
+              key={rg.id}
+              tab={{
+                path: `/${guildIdParam}/${rg.urlName}`,
+                segment: rg.urlName,
+                label: rg.name,
+              }}
+            />
+          ))}
+        </div>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+      {children}
+    </main>
   );
 };
 

diff --git a/src/app/(dashboard)/explorer/components/GuildCard.tsx b/src/app/(dashboard)/explorer/components/GuildCard.tsx
@@ -1,9 +1,10 @@
+import { GuildImage } from "@/components/GuildImage";
 import { Badge } from "@/components/ui/Badge";
 import { Card } from "@/components/ui/Card";
 import { Skeleton } from "@/components/ui/Skeleton";
 import type { Guild } from "@/lib/schemas/guild";
-import { ImageSquare, Users } from "@phosphor-icons/react/dist/ssr";
-import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
+import { Users } from "@phosphor-icons/react/dist/ssr";
+
 import Link from "next/link";
 import type { FunctionComponent } from "react";
 
@@ -14,20 +15,11 @@ export const GuildCard: FunctionComponent<{ guild: Guild }> = ({ guild }) => {
       className="relative rounded-2xl outline-none focus-visible:ring-4"
     >
       <Card className="relative grid grid-cols-[theme(space.12)_1fr] grid-rows-2 items-center gap-x-4 gap-y-0.5 overflow-hidden rounded-2xl px-6 py-7 shadow-md before:absolute before:inset-0 before:bg-black/5 before:opacity-0 before:transition-opacity before:duration-200 before:content-[''] hover:before:opacity-55 active:before:opacity-85 dark:before:bg-white/5">
-        <Avatar className="row-span-2 grid size-12 place-items-center overflow-hidden rounded-full bg-image text-white">
-          <AvatarImage
-            src={
-              !!guild.imageUrl && !guild.imageUrl.startsWith("/guildLogos")
-                ? guild.imageUrl
-                : undefined
-            }
-            className="size-full"
-            alt="guild avatar"
-          />
-          <AvatarFallback>
-            <ImageSquare weight="duotone" className="size-6" />
-          </AvatarFallback>
-        </Avatar>
+        <GuildImage
+          name={guild.name}
+          imageUrl={guild.imageUrl}
+          className="row-span-2"
+        />
 
         <h3 className="line-clamp-1 font-black font-display text-lg">
           {guild.name}

diff --git a/src/components/GuildImage.tsx b/src/components/GuildImage.tsx
@@ -0,0 +1,30 @@
+import { cn } from "@/lib/cssUtils";
+import type { Guild } from "@/lib/schemas/guild";
+import { ImageSquare } from "@phosphor-icons/react/dist/ssr";
+import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
+
+type Props = {
+  className?: string;
+  name: Guild["name"];
+  imageUrl: Guild["imageUrl"];
+};
+
+export const GuildImage = ({ name, imageUrl, className }: Props) => (
+  <Avatar
+    className={cn(
+      "grid size-12 place-items-center overflow-hidden rounded-full bg-image text-white",
+      className,
+    )}
+  >
+    <AvatarImage
+      src={
+        !!imageUrl && !imageUrl.startsWith("/guildLogos") ? imageUrl : undefined
+      }
+      className="size-full"
+      alt={`${name} logo`}
+    />
+    <AvatarFallback className="grid size-full place-items-center">
+      <ImageSquare weight="duotone" className="size-2/5" />
+    </AvatarFallback>
+  </Avatar>
+);