Something went wrong. Try again.
leaflet fork for copy edit / bug fixes forked from leaflet.pub/leaflet
Something went wrong. Try again.
3.0 kB · 100 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101"use client";import { usePathname, useRouter, useSearchParams } from "next/navigation";import { ActionButton } from "./ActionButton";import { useIdentityData } from "components/IdentityProvider";import { ReaderUnreadSmall } from "components/Icons/ReaderSmall";import { NotificationsReadSmall, NotificationsUnreadSmall,} from "components/Icons/NotificationSmall";import { SpeedyLink } from "components/SpeedyLink";import { WriterSmall } from "components/Icons/WriterSmall";function useIsActive(href: string) { let pathname = usePathname(); return pathname === href || pathname.startsWith(href + "/");}
const WRITER_PATHS = ["/home", "/looseleafs", "/notifications"] as const;
export function useIsOnWriterPage() { let pathname = usePathname(); return WRITER_PATHS.some((p) => pathname.startsWith(p));}
export const WriterButton = () => { let current = useIsOnWriterPage(); return ( <SpeedyLink eager href={"/home"} className="hover:!no-underline"> <ActionButton className={"w-full!"} icon={<WriterSmall />} label="Write" active={current} /> </SpeedyLink> );};
export const ReaderButton = (props: { subs: boolean }) => { let current = useIsActive("/reader"); return ( <SpeedyLink eager href={"/reader"} className="hover:no-underline!"> <ActionButton className="w-full!" icon={<ReaderUnreadSmall />} label="Read" active={current} /> </SpeedyLink> );};
export function NotificationButton() { let { identity } = useIdentityData(); let unreads = identity?.notifications[0]?.count;
let pathname = usePathname(); let searchParams = useSearchParams(); let router = useRouter();
let isOnPage = pathname === "/notifications" || pathname.startsWith("/notifications/"); let isOpen = searchParams.get("notifications") === "open"; let active = isOnPage || isOpen;
function handleClick() { if (isOnPage || isOpen) return; let params = new URLSearchParams(searchParams.toString()); params.set("notifications", "open"); router.push(`${pathname}?${params.toString()}`, { scroll: false }); }
return ( <ActionButton type="button" onClick={handleClick} labelOnMobile={false} icon={ unreads ? ( <NotificationsUnreadSmall className="text-accent-contrast" /> ) : ( <NotificationsReadSmall /> ) } label={ unreads ? ( <span className="flex items-center justify-between gap-1.5"> Notifications <span className="min-w-6 h-fit px-1 py-0.5 rounded-full bg-accent-1 text-accent-2 text-sm leading-none font-bold flex items-center justify-center max-w-full truncate"> {unreads} </span> </span> ) : ( "Notifications" ) } active={active} className={unreads ? "text-accent-contrast! font-bold w-full!" : "w-full"} /> );}