final cleanup

src/app/explorer/components/CreateGuildLink.tsx

@@ -1,32 +1,19 @@
-"use client";
-
 import { buttonVariants } from "@/components/ui/Button";
-import { Plus } from "@phosphor-icons/react";
-import { useAtomValue } from "jotai";
+import { Plus } from "@phosphor-icons/react/dist/ssr";
 import Link from "next/link";
-import { isNavStuckAtom } from "../atoms";
 
-export const CreateGuildLink = () => {
-  const isNavStuck = useAtomValue(isNavStuckAtom);
-  return (
-    <Link
-      href="/create-guild"
-      aria-label="Create guild"
-      prefetch={false}
-      className={buttonVariants({
-        variant: "ghost",
-        size: "sm",
-        className: [
-          // Temporarily, until we don't migrate the scrollable Tabs component
-          "min-h-11 w-11 gap-1.5 px-0 sm:min-h-0 sm:w-auto sm:px-3",
-          {
-            "text-white": !isNavStuck,
-          },
-        ],
-      })}
-    >
-      <Plus />
-      <span className="hidden sm:inline-block">Create guild</span>
-    </Link>
-  );
-};
+export const CreateGuildLink = () => (
+  <Link
+    href="/create-guild"
+    aria-label="Create guild"
+    prefetch={false}
+    className={buttonVariants({
+      variant: "ghost",
+      size: "sm",
+      className: "min-h-11 w-11 gap-1.5 px-0 sm:min-h-0 sm:w-auto sm:px-3",
+    })}
+  >
+    <Plus />
+    <span className="hidden sm:inline-block">Create guild</span>
+  </Link>
+);

src/app/explorer/components/GuildCard.tsx

@@ -0,0 +1,66 @@
+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="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>
+
+        <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>
+  );
+};

src/app/explorer/components/InfiniteScrollGuilds.tsx

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

src/app/explorer/components/StickyNavbar.tsx

@@ -9,7 +9,6 @@ import { activeSectionAtom, isNavStuckAtom, isSearchStuckAtom } from "../atoms";
 import { ACTIVE_SECTION } from "../constants";
 
 const Nav = () => {
-  const _isNavStuck = useAtomValue(isNavStuckAtom);
   const isSearchStuck = useAtomValue(isSearchStuckAtom);
   const [activeSection, setActiveSection] = useAtom(activeSectionAtom);
   const spyActiveSection = useScrollspy(Object.values(ACTIVE_SECTION), 0);

src/app/explorer/page.tsx

@@ -1,6 +1,4 @@
 import { AuthBoundary } from "@/components/AuthBoundary";
-import { GuildCardSkeleton } from "@/components/GuildCard";
-import { GuildCard } from "@/components/GuildCard";
 import { SignInButton } from "@/components/SignInButton";
 import { env } from "@/lib/env";
 import {
@@ -10,6 +8,7 @@ import {
 } from "@tanstack/react-query";
 import { Suspense } from "react";
 import { CreateGuildLink } from "./components/CreateGuildLink";
+import { GuildCard, GuildCardSkeleton } from "./components/GuildCard";
 import { HeaderBackground } from "./components/HeaderBackground";
 import { InfiniteScrollGuilds } from "./components/InfiniteScrollGuilds";
 import { StickyNavbar } from "./components/StickyNavbar";