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