refactor: move out guild card

src/app/explorer/components/GuildCard.tsx

@@ -1,44 +0,0 @@
-import { Badge } from "@/components/ui/Badge";
-import { Card } from "@/components/ui/Card";
-import { ImageSquare, Users } from "@phosphor-icons/react/dist/ssr";
-import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
-import Link from "next/link";
-import type { FunctionComponent } from "react";
-
-export const GuildCard: FunctionComponent<{ guild: Guild }> = ({ guild }) => {
-  return (
-    <Link
-      href={`/${guild.urlName}`}
-      className="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}
-            className="size-full"
-            alt="guild avatar"
-          />
-          <AvatarFallback>
-            <ImageSquare weight="duotone" className="size-6" />
-          </AvatarFallback>
-        </Avatar>
-
-        <h3 className="line-clamp-1 font-black font-display text-lg">
-          {guild.name}
-        </h3>
-        <div className="flex flex-wrap gap-1">
-          <Badge>
-            <Users className="size-4" />
-            <span>
-              {new Intl.NumberFormat("en", {
-                notation: "compact",
-              }).format(12345)}
-            </span>
-          </Badge>
-
-          <Badge>5 groups</Badge>
-        </div>
-      </Card>
-    </Link>
-  );
-};

src/app/explorer/components/InfiniteScrollGuilds.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { GuildCardSkeleton } from "@/components/GuildCardSkeleton";
+import { GuildCard, GuildCardSkeleton } from "@/components/GuildCard";
 import { Button } from "@/components/ui/Button";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useIntersection } from "foxact/use-intersection";
@@ -9,7 +9,6 @@ import { useCallback, useEffect } from "react";
 import { searchAtom } from "../atoms";
 import { PAGE_SIZE } from "../constants";
 import { getGuildSearch } from "../fetchers";
-import { GuildCard } from "./GuildCard";
 
 export const InfiniteScrollGuilds = () => {
   const search = useAtomValue(searchAtom);

src/app/explorer/page.tsx

@@ -1,5 +1,6 @@
 import { AuthBoundary } from "@/components/AuthBoundary";
-import { GuildCardSkeleton } from "@/components/GuildCardSkeleton";
+import { GuildCardSkeleton } from "@/components/GuildCard";
+import { GuildCard } from "@/components/GuildCard";
 import { Button } from "@/components/ui/Button";
 import { env } from "@/lib/env";
 import { Plus, SignIn } from "@phosphor-icons/react/dist/ssr";
@@ -9,7 +10,6 @@ import {
   dehydrate,
 } from "@tanstack/react-query";
 import { Suspense } from "react";
-import { GuildCard } from "./components/GuildCard";
 import { InfiniteScrollGuilds } from "./components/InfiniteScrollGuilds";
 import { Search } from "./components/Search";
 import { getGuildSearch } from "./fetchers";

src/components/GuildCard.tsx

@@ -0,0 +1,62 @@
+import { Badge } from "@/components/ui/Badge";
+import { Card } from "@/components/ui/Card";
+import { Skeleton } from "@/components/ui/Skeleton";
+import { ImageSquare, Users } from "@phosphor-icons/react/dist/ssr";
+import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
+import Link from "next/link";
+import type { FunctionComponent } from "react";
+
+export const GuildCard: FunctionComponent<{ guild: Guild }> = ({ guild }) => {
+  return (
+    <Link
+      href={`/${guild.urlName}`}
+      className="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}
+            className="size-full"
+            alt="guild avatar"
+          />
+          <AvatarFallback>
+            <ImageSquare weight="duotone" className="size-6" />
+          </AvatarFallback>
+        </Avatar>
+
+        <h3 className="line-clamp-1 font-black font-display text-lg">
+          {guild.name}
+        </h3>
+        <div className="flex flex-wrap gap-1">
+          <Badge>
+            <Users className="size-4" />
+            <span>
+              {new Intl.NumberFormat("en", {
+                notation: "compact",
+              }).format(12345)}
+            </span>
+          </Badge>
+
+          <Badge>5 groups</Badge>
+        </div>
+      </Card>
+    </Link>
+  );
+};
+
+export const GuildCardSkeleton = () => {
+  return (
+    <div className="grid grid-cols-[theme(space.14)_1fr] items-center gap-4 rounded-2xl bg-card px-5 py-6 shadow-md">
+      <Skeleton className="size-14 rounded-full" />
+
+      <div className="grid gap-1.5">
+        <Skeleton className="h-6 w-3/4" />
+
+        <div className="flex flex-wrap gap-1">
+          <Skeleton className="h-6 w-16" />
+          <Skeleton className="h-6 w-16" />
+        </div>
+      </div>
+    </div>
+  );
+};