Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
2.3 kB · 66 lines
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667"use client";
import { useContext, useEffect } from "react";import { SidebarContext } from "./Sidebar";import React, { forwardRef, type JSX } from "react";import { PopoverOpenContext } from "components/Popover";
type ButtonProps = Omit<JSX.IntrinsicElements["button"], "content">;
export const ActionButton = ( props: ButtonProps & { id?: string; icon: React.ReactNode; label: React.ReactNode; primary?: boolean; secondary?: boolean; nav?: boolean; className?: string; subtext?: string; },) => { let { id, icon, label, primary, secondary, nav, ...buttonProps } = props; let sidebar = useContext(SidebarContext); let inOpenPopover = useContext(PopoverOpenContext); useEffect(() => { if (inOpenPopover) { sidebar.setChildForceOpen(true); return () => { sidebar.setChildForceOpen(false); }; } }, [sidebar, inOpenPopover]); return ( <button {...buttonProps} className={` actionButton relative font-bold rounded-md border flex gap-2 items-start sm:justify-start justify-center p-1 sm:mx-0 ${ primary ? "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" : secondary ? "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" : nav ? "w-full border-transparent text-secondary sm:hover:border-border justify-start!" : "sm:w-full border-transparent text-accent-contrast sm:hover:border-accent-contrast" } ${props.className} `} > <div className="shrink-0">{icon}</div> <div className={`flex flex-col pr-1 leading-snug max-w-full min-w-0 ${sidebar.open ? "block" : primary || secondary || nav ? "sm:hidden block" : "hidden"}`} > <div className="truncate text-left pt-[1px]">{label}</div> {props.subtext && ( <div className="text-xs text-tertiary font-normal text-left"> {props.subtext} </div> )} </div> </button> );};