diff --git a/src/app/explorer/_components/InfiniteScrollGuilds.tsx b/src/app/explorer/_components/InfiniteScrollGuilds.tsx
index 13c3305e2d..7b38e1ee7c 100644
--- a/src/app/explorer/_components/InfiniteScrollGuilds.tsx
+++ b/src/app/explorer/_components/InfiniteScrollGuilds.tsx
@@ -70,9 +70,7 @@ export const InfiniteScrollGuilds = () => {
{isFetchingNextPage
? "Loading more..."
- : hasNextPage
- ? "Load More"
- : "No More Data"}
+ : hasNextPage || "No More Data"}
)}
diff --git a/src/app/explorer/_components/Search.tsx b/src/app/explorer/_components/Search.tsx
index 6e9840d09e..e67d2facc0 100644
--- a/src/app/explorer/_components/Search.tsx
+++ b/src/app/explorer/_components/Search.tsx
@@ -1,14 +1,15 @@
"use client";
import { Input } from "@/components/ui/Input";
+import useIsStuck from "@/hooks/useIsStuck";
import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr";
import { useDebouncedValue } from "foxact/use-debounced-value";
import { useSetAtom } from "jotai";
import { usePathname, useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
-import { searchAtom } from "../atoms";
+import { Suspense, useEffect, useState } from "react";
+import { isSearchStuckAtom, searchAtom } from "../atoms";
-export const Search = () => {
+const Search = () => {
const searchParams = useSearchParams();
const pathname = usePathname();
const [value, setValue] = useState(
@@ -48,3 +49,16 @@ export const Search = () => {
);
};
+
+export const StickySearch = () => {
+ const setIsSearchStuck = useSetAtom(isSearchStuckAtom);
+ const { ref: searchRef } = useIsStuck(setIsSearchStuck);
+
+ return (
+
+
+
+
+
+ );
+};
diff --git a/src/app/explorer/_components/StickyBar.tsx b/src/app/explorer/_components/StickyBar.tsx
index c551ef5ee4..f06ad2ac09 100644
--- a/src/app/explorer/_components/StickyBar.tsx
+++ b/src/app/explorer/_components/StickyBar.tsx
@@ -1,7 +1,4 @@
"use client";
-
-import { AuthBoundary } from "@/components/AuthBoundary";
-//import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
import { buttonVariants } from "@/components/ui/Button";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/ToggleGroup";
import useIsStuck from "@/hooks/useIsStuck";
@@ -10,7 +7,7 @@ import { cn } from "@/lib/cssUtils";
import { Plus } from "@phosphor-icons/react";
import { useAtom, useAtomValue, useSetAtom } from "jotai";
import Link from "next/link";
-import { useEffect } from "react";
+import { type PropsWithChildren, useEffect } from "react";
import { activeSectionAtom, isNavStuckAtom, isSearchStuckAtom } from "../atoms";
import { ACTIVE_SECTION } from "../constants";
@@ -73,7 +70,7 @@ const Nav = () => {
);
};
-const CreateGuildLink = () => {
+export const CreateGuildLink = () => {
const isNavStuck = useAtomValue(isNavStuckAtom);
return (
{
);
};
-export const StickyBar = () => {
- //const { isWeb3Connected } = useWeb3ConnectionManager()
+export const StickyBar = ({ children }: PropsWithChildren) => {
const setIsNavStuck = useSetAtom(isNavStuckAtom);
const isSearchStuck = useAtomValue(isSearchStuckAtom);
const { ref: navToggleRef } = useIsStuck(setIsNavStuck);
@@ -116,9 +112,7 @@ export const StickyBar = () => {
>
);
diff --git a/src/app/explorer/page.tsx b/src/app/explorer/page.tsx
index c19399edfc..447f10a76f 100644
--- a/src/app/explorer/page.tsx
+++ b/src/app/explorer/page.tsx
@@ -3,7 +3,7 @@ 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";
+import { SignIn } from "@phosphor-icons/react/dist/ssr";
import {
HydrationBoundary,
QueryClient,
@@ -12,7 +12,8 @@ import {
import { Suspense } from "react";
import { HeaderBackground } from "./_components/HeaderBackground";
import { InfiniteScrollGuilds } from "./_components/InfiniteScrollGuilds";
-import { Search } from "./_components/Search";
+import { StickySearch } from "./_components/Search";
+import { CreateGuildLink, StickyBar } from "./_components/StickyBar";
import { ACTIVE_SECTION } from "./constants";
import { getGuildSearch } from "./fetchers";
@@ -46,11 +47,17 @@ export default async function Explorer() {
+
+
+
+
+
-
+
+ Explore verified guilds
+
+
@@ -63,8 +70,6 @@ export default async function Explorer() {
async function YourGuildsSection() {
return (
- Your guilds
-
@@ -110,9 +115,7 @@ async function YourGuilds() {
or create your own!
- } className="ml-auto h-10">
- Create guild
-
+
);
}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index aa5172f928..ff0be76648 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,8 +1,6 @@
-import { me } from "@/actions/me";
import { AuthBoundary } from "./AuthBoundary";
import { SignInButton } from "./SignInButton";
import { SignOutButton } from "./SignOutButton";
-import { Button } from "./ui/Button";
import { Card } from "./ui/Card";
export const Header = () => (
@@ -10,10 +8,6 @@ export const Header = () => (
{/* TODO: NavMenu component */}
-
-
}>