ajamesphillips.com
forked from
leaflet.pub/leaflet
a tool for shared writing and social publishing
1"use client";
2
3import { useContext, useEffect } from "react";
4import { SidebarContext } from "./Sidebar";
5import React, { forwardRef, type JSX } from "react";
6import { PopoverOpenContext } from "components/Popover";
7
8type ButtonProps = Omit<JSX.IntrinsicElements["button"], "content">;
9
10export const ActionButton = (
11 _props: ButtonProps & {
12 id?: string;
13 icon: React.ReactNode;
14 label: React.ReactNode;
15 primary?: boolean;
16 secondary?: boolean;
17 nav?: boolean;
18 className?: string;
19 subtext?: string;
20 labelOnMobile?: boolean;
21 z?: boolean;
22 },
23) => {
24 let {
25 id,
26 icon,
27 label,
28 primary,
29 secondary,
30 nav,
31 labelOnMobile,
32 subtext,
33 className,
34 ...buttonProps
35 } = _props;
36 let sidebar = useContext(SidebarContext);
37 let inOpenPopover = useContext(PopoverOpenContext);
38 useEffect(() => {
39 if (inOpenPopover) {
40 sidebar.setChildForceOpen(true);
41 return () => {
42 sidebar.setChildForceOpen(false);
43 };
44 }
45 }, [sidebar, inOpenPopover]);
46
47 let showLabelOnMobile =
48 labelOnMobile !== false && (primary || secondary || nav);
49
50 return (
51 <button
52 {...buttonProps}
53 className={`
54 actionButton relative font-bold
55 rounded-md border
56 flex gap-2 items-start sm:justify-start justify-center
57 p-1 sm:mx-0
58 ${showLabelOnMobile && !secondary ? "w-full" : "sm:w-full w-max"}
59 ${
60 primary
61 ? "bg-accent-1 border-accent-1 text-accent-2 transparent-outline sm:hover:outline-accent-contrast focus:outline-accent-1 outline-offset-1 mx-1 first:ml-0"
62 : secondary
63 ? " bg-bg-page border-accent-contrast text-accent-contrast transparent-outline focus:outline-accent-contrast sm:hover:outline-accent-contrast outline-offset-1 mx-1 first:ml-0"
64 : nav
65 ? "border-transparent text-secondary sm:hover:border-border justify-start!"
66 : "border-transparent text-accent-contrast sm:hover:border-accent-contrast"
67 }
68 ${className}
69 `}
70 >
71 <div className="shrink-0">{icon}</div>
72 <div
73 className={`flex flex-col pr-1 leading-snug max-w-full min-w-0 ${sidebar.open ? "block" : showLabelOnMobile ? "sm:hidden block" : "hidden"}`}
74 >
75 <div className="truncate text-left pt-[1px]">{label}</div>
76 {subtext && (
77 <div className="text-xs text-tertiary font-normal text-left">
78 {subtext}
79 </div>
80 )}
81 </div>
82 </button>
83 );
84};