From d41eff83fd15531e760956c3e391234cba36dcb0 Mon Sep 17 00:00:00 2001 From: Dominik Stumpf Date: Thu, 21 Nov 2024 18:37:37 +0100 Subject: [PATCH] chore: add header prereqs --- public/images/robot.svg | 14 ++++++ .../{components => _components}/GuildCard.tsx | 0 .../explorer/_components/HeaderBackground.tsx | 23 +++++++++ .../InfiniteScrollGuilds.tsx | 4 +- .../{components => _components}/Search.tsx | 2 +- src/app/explorer/atoms.ts | 2 + src/app/explorer/constants.ts | 4 ++ src/app/explorer/page.tsx | 48 +++++++++++-------- 8 files changed, 75 insertions(+), 22 deletions(-) create mode 100644 public/images/robot.svg rename src/app/explorer/{components => _components}/GuildCard.tsx (100%) create mode 100644 src/app/explorer/_components/HeaderBackground.tsx rename src/app/explorer/{components => _components}/InfiniteScrollGuilds.tsx (94%) rename src/app/explorer/{components => _components}/Search.tsx (95%) diff --git a/public/images/robot.svg b/public/images/robot.svg new file mode 100644 index 0000000000..9079bbab15 --- /dev/null +++ b/public/images/robot.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/app/explorer/components/GuildCard.tsx b/src/app/explorer/_components/GuildCard.tsx similarity index 100% rename from src/app/explorer/components/GuildCard.tsx rename to src/app/explorer/_components/GuildCard.tsx diff --git a/src/app/explorer/_components/HeaderBackground.tsx b/src/app/explorer/_components/HeaderBackground.tsx new file mode 100644 index 0000000000..66544aba41 --- /dev/null +++ b/src/app/explorer/_components/HeaderBackground.tsx @@ -0,0 +1,23 @@ +"use client"; + +import { cn } from "@/lib/cssUtils"; +import { useAtomValue } from "jotai"; +import { isNavStuckAtom, isSearchStuckAtom } from "../atoms"; + +export const HeaderBackground = () => { + const isNavStuck = useAtomValue(isNavStuckAtom); + const isSearchStuck = useAtomValue(isSearchStuckAtom); + + return ( +
+ ); +}; diff --git a/src/app/explorer/components/InfiniteScrollGuilds.tsx b/src/app/explorer/_components/InfiniteScrollGuilds.tsx similarity index 94% rename from src/app/explorer/components/InfiniteScrollGuilds.tsx rename to src/app/explorer/_components/InfiniteScrollGuilds.tsx index 155422d8ba..b4651d1f0c 100644 --- a/src/app/explorer/components/InfiniteScrollGuilds.tsx +++ b/src/app/explorer/_components/InfiniteScrollGuilds.tsx @@ -7,7 +7,7 @@ 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 { ACTIVE_SECTION, PAGE_SIZE } from "../constants"; import { getGuildSearch } from "../fetchers"; export const InfiniteScrollGuilds = () => { @@ -45,7 +45,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/Search.tsx b/src/app/explorer/_components/Search.tsx similarity index 95% rename from src/app/explorer/components/Search.tsx rename to src/app/explorer/_components/Search.tsx index 77af409108..6e9840d09e 100644 --- a/src/app/explorer/components/Search.tsx +++ b/src/app/explorer/_components/Search.tsx @@ -29,7 +29,7 @@ export const Search = () => { window.history.replaceState( null, "", - `${pathname}?${newSearchParams.toString()}`, + [pathname, newSearchParams.toString()].filter(Boolean).join("?"), ); }, [value, pathname]); diff --git a/src/app/explorer/atoms.ts b/src/app/explorer/atoms.ts index 0fa04b9ce8..cc0ef0d59c 100644 --- a/src/app/explorer/atoms.ts +++ b/src/app/explorer/atoms.ts @@ -1,3 +1,5 @@ import { atom } from "jotai"; export const searchAtom = atom(undefined); +export const isNavStuckAtom = atom(false); +export const isSearchStuckAtom = atom(false); diff --git a/src/app/explorer/constants.ts b/src/app/explorer/constants.ts index 0a155f3509..3c0383f14b 100644 --- a/src/app/explorer/constants.ts +++ b/src/app/explorer/constants.ts @@ -1 +1,5 @@ export const PAGE_SIZE = 24; +export const ACTIVE_SECTION = { + yourGuilds: "your-guilds", + exploreGuilds: "explore-guilds", +}; diff --git a/src/app/explorer/page.tsx b/src/app/explorer/page.tsx index 046c5279b0..c19399edfc 100644 --- a/src/app/explorer/page.tsx +++ b/src/app/explorer/page.tsx @@ -10,8 +10,10 @@ import { dehydrate, } from "@tanstack/react-query"; import { Suspense } from "react"; -import { InfiniteScrollGuilds } from "./components/InfiniteScrollGuilds"; -import { Search } from "./components/Search"; +import { HeaderBackground } from "./_components/HeaderBackground"; +import { InfiniteScrollGuilds } from "./_components/InfiniteScrollGuilds"; +import { Search } from "./_components/Search"; +import { ACTIVE_SECTION } from "./constants"; import { getGuildSearch } from "./fetchers"; const getAssociatedGuilds = async () => { @@ -32,21 +34,29 @@ export default async function Explorer() { }); return ( -
-
-

Guildhall

-
- - - -
- -
- - - - -
+ <> + +
+
+

+ Guildhall +

+
+ + + +
+ +
+ + + + +
+ ); } @@ -58,7 +68,7 @@ async function YourGuildsSection() { - Guild Robot + Guild Robot

Sign in to view your guilds or create new ones @@ -93,7 +103,7 @@ async function YourGuilds() {

) : (
- Guild Robot + Guild Robot

You're not a member of any guilds yet. Explore and join some below,