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 smallOnMobile?: boolean;
23 z?: boolean;
24 }
25>((_props, ref) => {
26 let {
27 id,
28 icon,
29 label,
30 primary,
31 secondary,
32 nav,
33 labelOnMobile,
34 smallOnMobile,
35 subtext,
36 className,
37 ...buttonProps
38 } = _props;
39 let sidebar = useContext(SidebarContext);
40 let inOpenPopover = useContext(PopoverOpenContext);
41 useEffect(() => {
42 if (inOpenPopover) {
43 sidebar.setChildForceOpen(true);
44 return () => {
45 sidebar.setChildForceOpen(false);
46 };
47 }
48 }, [sidebar, inOpenPopover]);
49
50 let showLabelOnMobile =
51 labelOnMobile !== false && (primary || secondary || nav);
52
53 return (
54 <button
55 {...buttonProps}
56 ref={ref}
57 className={`
58 actionButton relative font-bold
59 rounded-md border
60 flex gap-2 items-center justify-start
61 w-max sm:w-[1000px] sm:max-w-full p-1
62 ${smallOnMobile && "sm:text-base text-sm py-0! sm:py-1! sm:h-fit h-6"}
63 ${
64 primary
65 ? "bg-accent-1 border-accent-1 text-accent-2 transparent-outline sm:hover:outline-accent-contrast focus:outline-accent-1 outline-offset-1 "
66 : secondary
67 ? " bg-bg-page border-accent-contrast text-accent-contrast transparent-outline focus:outline-accent-contrast sm:hover:outline-accent-contrast outline-offset-1"
68 : nav
69 ? "border-transparent text-secondary sm:hover:border-border justify-start! max-w-full"
70 : "border-transparent text-accent-contrast sm:hover:border-accent-contrast"
71 }
72 ${className}
73 `}
74 >
75 <div className="shrink-0 flex flex-row gap-0.5">{icon}</div>
76 <div
77 className={`flex flex-col ${subtext && "leading-snug"} max-w-full min-w-0 mr-1 ${sidebar.open ? "block" : showLabelOnMobile ? "sm:hidden block" : "hidden"}`}
78 >
79 <div className="truncate text-left">{label}</div>
80 {subtext && (
81 <div className="text-xs text-tertiary font-normal text-left">
82 {subtext}
83 </div>
84 )}
85 </div>
86 </button>
87 );
88});
89ActionButton.displayName = "ActionButton";