leaflet.pub
a tool for shared writing and social publishing
awarm.space
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 },
21) => {
22 let { id, icon, label, primary, secondary, nav, ...buttonProps } = props;
23 let sidebar = useContext(SidebarContext);
24 let inOpenPopover = useContext(PopoverOpenContext);
25 useEffect(() => {
26 if (inOpenPopover) {
27 sidebar.setChildForceOpen(true);
28 return () => {
29 sidebar.setChildForceOpen(false);
30 };
31 }
32 }, [sidebar, inOpenPopover]);
33 return (
34 <button
35 {...buttonProps}
36 className={`
37 actionButton relative font-bold
38 rounded-md border
39 flex gap-2 items-start sm:justify-start justify-center
40 p-1 sm:mx-0
41 ${
42 primary
43 ? "w-full 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"
44 : secondary
45 ? "sm:w-full w-max 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"
46 : nav
47 ? "w-full border-transparent text-secondary sm:hover:border-border justify-start!"
48 : "sm:w-full border-transparent text-accent-contrast sm:hover:border-accent-contrast"
49 }
50 ${props.className}
51 `}
52 >
53 <div className="shrink-0">{icon}</div>
54 <div
55 className={`flex flex-col pr-1 leading-snug max-w-full min-w-0 ${sidebar.open ? "block" : primary || secondary || nav ? "sm:hidden block" : "hidden"}`}
56 >
57 <div className="truncate text-left pt-[1px]">{label}</div>
58 {props.subtext && (
59 <div className="text-xs text-tertiary font-normal text-left">
60 {props.subtext}
61 </div>
62 )}
63 </div>
64 </button>
65 );
66};