diff --git a/src/app/(dashboard)/explorer/components/StickyNavbar.tsx b/src/app/(dashboard)/explorer/components/StickyNavbar.tsx index e794e5e14b..3f0ed56433 100644 --- a/src/app/(dashboard)/explorer/components/StickyNavbar.tsx +++ b/src/app/(dashboard)/explorer/components/StickyNavbar.tsx @@ -1,7 +1,7 @@ "use client"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/ToggleGroup"; -import useIsStuck from "@/hooks/useIsStuck"; -import useScrollspy from "@/hooks/useScrollSpy"; +import { useIsStuck } from "@/hooks/useIsStuck"; +import { useScrollspy } from "@/hooks/useScrollSpy"; import { cn } from "@/lib/cssUtils"; import { useAtom, useAtomValue, useSetAtom } from "jotai"; import { type PropsWithChildren, useEffect } from "react"; diff --git a/src/app/(dashboard)/explorer/components/StickySearch.tsx b/src/app/(dashboard)/explorer/components/StickySearch.tsx index e67d2facc0..063ed296e1 100644 --- a/src/app/(dashboard)/explorer/components/StickySearch.tsx +++ b/src/app/(dashboard)/explorer/components/StickySearch.tsx @@ -1,7 +1,7 @@ "use client"; import { Input } from "@/components/ui/Input"; -import useIsStuck from "@/hooks/useIsStuck"; +import { useIsStuck } from "@/hooks/useIsStuck"; import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr"; import { useDebouncedValue } from "foxact/use-debounced-value"; import { useSetAtom } from "jotai"; diff --git a/src/components/NavMenu.tsx b/src/components/NavMenu.tsx index 546776cf88..72749fa951 100644 --- a/src/components/NavMenu.tsx +++ b/src/components/NavMenu.tsx @@ -21,11 +21,11 @@ import { } from "@phosphor-icons/react/dist/ssr"; import { useIsClient } from "foxact/use-is-client"; import { useTheme } from "next-themes"; -import Link, { type LinkProps } from "next/link"; import { usePathname } from "next/navigation"; -import type { AnchorHTMLAttributes, ReactNode } from "react"; +import type { ComponentProps, ReactNode } from "react"; import GuildLogo from "static/logo.svg"; -import { Button } from "./ui/Button"; +import { Anchor } from "./ui/Anchor"; +import { Button, buttonVariants } from "./ui/Button"; import { Popover, PopoverContent, PopoverTrigger } from "./ui/Popover"; import { ToggleGroup, ToggleGroupItem } from "./ui/ToggleGroup"; @@ -131,37 +131,32 @@ const NavGroup = ({ const NavButton = ({ href, children, -}: { href: string; children: ReactNode }) => { + ...props +}: ComponentProps) => { const pathname = usePathname(); - - const isExternal = href.startsWith("http"); - const wrapperProps = { - href, - ...(isExternal - ? ({ - target: "_blank", - rel: "noopener", - } satisfies AnchorHTMLAttributes) - : ({ - passHref: true, - legacyBehavior: true, - } satisfies Partial)), - }; - - const Wrapper = isExternal ? "a" : Link; + const externalProps = href.toString().startsWith("/") + ? {} + : { + target: "_blank", + rel: "noopener noreferrer", + }; return ( - - - + ), + })} + > + {children} + ); }; diff --git a/src/hooks/useIsStuck.ts b/src/hooks/useIsStuck.ts index 9497b81f35..2cfe8c22e7 100644 --- a/src/hooks/useIsStuck.ts +++ b/src/hooks/useIsStuck.ts @@ -40,9 +40,9 @@ const useIsStuck = ( ); observer.observe(cachedRef); return () => observer.unobserve(cachedRef); - }, [ref]); + }, [setIsStuckActive]); return { ref, isStuck: setIsStuck ? undefined : isStuck }; }; -export default useIsStuck; +export { useIsStuck }; diff --git a/src/hooks/useScrollSpy.ts b/src/hooks/useScrollSpy.ts index 7fb5b65864..391f2419cd 100644 --- a/src/hooks/useScrollSpy.ts +++ b/src/hooks/useScrollSpy.ts @@ -1,9 +1,5 @@ import { useLayoutEffect, useState } from "react"; -// Restrict value to be between the range [0, value] -const clamp = (value: number) => Math.max(0, value); - -// Check if number is between two values const isBetween = (value: number, floor: number, ceil: number) => value >= floor && value <= ceil; @@ -21,8 +17,8 @@ const useScrollspy = (ids: string[], offset = 0) => { if (!element) return { id, top: -1, bottom: -1 }; const rect = element.getBoundingClientRect(); - const top = clamp(rect.top + scroll - offset); - const bottom = clamp(rect.bottom + scroll - offset); + const top = Math.max(0, rect.top + scroll - offset); + const bottom = Math.max(0, rect.bottom + scroll - offset); return { id, top, bottom }; }) @@ -45,4 +41,4 @@ const useScrollspy = (ids: string[], offset = 0) => { return activeId; }; -export default useScrollspy; +export { useScrollspy };