Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
2.8 kB · 95 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596"use client";
import { useContext, useEffect } from "react";import { SidebarContext } from "./Sidebar";import React, { forwardRef, type JSX } from "react";import { PopoverOpenContext } from "components/Popover/PopoverContext";
type ButtonProps = Omit<JSX.IntrinsicElements["button"], "content">;
export const ActionButton = forwardRef< HTMLButtonElement, ButtonProps & { id?: string; icon: React.ReactNode; label: React.ReactNode; primary?: boolean; secondary?: boolean; active?: boolean; className?: string; subtext?: string; labelOnMobile?: boolean; z?: boolean; }>((_props, ref) => { let { id, icon, label, primary, secondary, active, labelOnMobile, subtext, className, ...buttonProps } = _props; let sidebar = useContext(SidebarContext); let inOpenPopover = useContext(PopoverOpenContext); useEffect(() => { if (inOpenPopover) { sidebar.setChildForceOpen(true); return () => { sidebar.setChildForceOpen(false); }; } }, [sidebar, inOpenPopover]);
// let showLabelOnMobile = labelOnMobile !== false && (primary || secondary);
return ( <button {...buttonProps} ref={ref} className={` actionButton relative shrink-0 h-fit rounded-md border py-0.5 px-1 flex gap-2 items-start justify-start sm:w-full sm:max-w-full ${labelOnMobile ? "w-full" : "w-fit"} outline-2 outline-transparent outline-offset-1
${ primary ? "bg-accent-1 border-accent-1 text-accent-2 sm:hover:outline-accent-contrast focus:outline-accent-1 font-bold" : secondary ? "border-accent-contrast sm:hover:outline-accent-contrast focus:outline-accent-1 text-accent-contrast hover:border-accent-contrast focus:border-accent-contrast font-bold" : "border-transparent text-secondary sm:hover:border-border justify-start! max-w-full" } ${active ? "bg-bg-page! border-border-light!" : ""} ${className} `} > <div className={`shrink-0 flex flex-row gap-0.5 ${!primary && !secondary && "text-secondary sm:text-tertiary"}`} > {icon} </div> <div className={`flex flex-col ${subtext && "leading-snug"} sm:max-w-full min-w-0 mr-1 ${sidebar.open ? "block" : labelOnMobile ? "sm:hidden block" : "hidden"}`} style={{ width: "-webkit-fill-available" }} > <div className="truncate text-left">{label}</div> {subtext && ( <div className={`text-xs ${secondary ? "text-accent-contrast" : "text-tertiary"} font-normal text-left`} > {subtext} </div> )} </div> </button> );});ActionButton.displayName = "ActionButton";