diff --git a/package.json b/package.json index 1caacdcb5f..dfb19eb106 100644 --- 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 new file mode 100644 index 0000000000..00a25612fa --- /dev/null +++ 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 ( + + + Create guild + + ); +}; diff --git a/src/app/explorer/_components/InfiniteScrollGuilds.tsx b/src/app/explorer/_components/InfiniteScrollGuilds.tsx index 7b38e1ee7c..03e84654bb 100644 --- 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 ( -
+
{isLoading ? Array.from({ length: PAGE_SIZE }, (_, i) => ( diff --git a/src/app/explorer/_components/StickyBar.tsx b/src/app/explorer/_components/StickyBar.tsx index f06ad2ac09..90e78128ea 100644 --- 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 ( - - - Create guild - - ); -}; - 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 index 5fbf46aed7..387d9fe329 100644 --- 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 ( <> -
+

-

+

Explore verified guilds