fix: adjust navigation alignment

guildxyz · Nov 21, 2024 · 9bed877 · 9bed877
1 parent 8d5830f
commit 9bed877
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "foxact": "^0.2.41",
-    "jotai": "^2.10.2",
+    "jotai": "^2.10.3",
     "next": "15.0.3",
     "next-themes": "^0.4.3",
     "react": "19.0.0-rc-66855b96-20241106",

diff --git a/src/app/explorer/_components/CreateGuildLink.tsx b/src/app/explorer/_components/CreateGuildLink.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { buttonVariants } from "@/components/ui/Button";
+import { Plus } from "@phosphor-icons/react";
+import { useAtomValue } from "jotai";
+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>
+  );
+};
diff --git a/src/app/explorer/_components/InfiniteScrollGuilds.tsx b/src/app/explorer/_components/InfiniteScrollGuilds.tsx
@@ -6,7 +6,7 @@ import { useIntersection } from "foxact/use-intersection";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect } from "react";
 import { searchAtom } from "../atoms";
-import { ACTIVE_SECTION, PAGE_SIZE } from "../constants";
+import { PAGE_SIZE } from "../constants";
 import { getGuildSearch } from "../fetchers";
 
 export const InfiniteScrollGuilds = () => {
@@ -44,7 +44,7 @@ export const InfiniteScrollGuilds = () => {
   const guilds = data?.pages.flatMap((page) => page.items) || [];
 
   return (
-    <section className="grid gap-2" id={ACTIVE_SECTION.exploreGuilds}>
+    <section className="grid gap-2">
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
         {isLoading
           ? Array.from({ length: PAGE_SIZE }, (_, i) => (

diff --git a/src/app/explorer/_components/StickyBar.tsx b/src/app/explorer/_components/StickyBar.tsx
@@ -1,12 +1,9 @@
 "use client";
-import { buttonVariants } from "@/components/ui/Button";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/ToggleGroup";
 import useIsStuck from "@/hooks/useIsStuck";
 import useScrollspy from "@/hooks/useScrollSpy";
 import { cn } from "@/lib/cssUtils";
-import { Plus } from "@phosphor-icons/react";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import Link from "next/link";
 import { type PropsWithChildren, useEffect } from "react";
 import { activeSectionAtom, isNavStuckAtom, isSearchStuckAtom } from "../atoms";
 import { ACTIVE_SECTION } from "../constants";
@@ -70,31 +67,6 @@ const Nav = () => {
   );
 };
 
-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 StickyBar = ({ children }: PropsWithChildren) => {
   const setIsNavStuck = useSetAtom(isNavStuckAtom);
   const isSearchStuck = useAtomValue(isSearchStuckAtom);

diff --git a/src/app/explorer/page.tsx b/src/app/explorer/page.tsx
@@ -9,10 +9,11 @@ import {
   dehydrate,
 } from "@tanstack/react-query";
 import { Suspense } from "react";
+import { CreateGuildLink } from "./_components/CreateGuildLink";
 import { HeaderBackground } from "./_components/HeaderBackground";
 import { InfiniteScrollGuilds } from "./_components/InfiniteScrollGuilds";
 import { StickySearch } from "./_components/Search";
-import { CreateGuildLink, StickyBar } from "./_components/StickyBar";
+import { StickyBar } from "./_components/StickyBar";
 import { ACTIVE_SECTION } from "./constants";
 import { getGuildSearch } from "./fetchers";
 
@@ -36,7 +37,7 @@ export default async function Explorer() {
   return (
     <>
       <HeaderBackground />
-      <main className="container mx-auto grid max-w-screen-lg gap-8 px-4 py-8">
+      <main className="container mx-auto grid max-w-screen-lg gap-4 px-4 py-8">
         <section className="pt-6 pb-8">
           <h1
             className="font-black font-display text-5xl tracking-tight"
@@ -53,7 +54,10 @@ export default async function Explorer() {
         </StickyBar>
         <YourGuildsSection />
 
-        <h2 className="mt-12 font-bold text-lg tracking-tight">
+        <h2
+          className="mt-12 font-bold text-lg tracking-tight"
+          id={ACTIVE_SECTION.exploreGuilds}
+        >
           Explore verified guilds
         </h2>
         <StickySearch />