attachment-button

1import { memo, type ReactNode } from "react";
2import { IconPaperclip, IconPlus } from "@tabler/icons-react";
3 
4export type AttachmentButtonIcon = "plus" | "paperclip";
5 
6export type AttachmentButtonProps = {
7  onClick?: () => void;
8  /**
9   * Icon to render inside the button.
10   * - "plus" (default): a `+` glyph, matches the generic "add something" affordance.
11   * - "paperclip": a paperclip glyph, matches the more literal "attach file" affordance.
12   * - Pass any ReactNode to fully override (e.g. a custom svg). The node is
13   *   rendered as-is inside the button; size/color from this component's
14   *   styling is only applied to the built-in presets.
15   */
16  icon?: AttachmentButtonIcon | ReactNode;
17};
18 
19function isIconName(value: unknown): value is AttachmentButtonIcon {
20  return value === "plus" || value === "paperclip";
21}
22 
23export const AttachmentButton = memo(function AttachmentButton({
24  onClick,
25  icon = "plus",
26}: AttachmentButtonProps) {
27  const iconClassName = "w-4 h-4 text-neutral-400 dark:text-neutral-600";
28  let iconNode: ReactNode;
29  if (isIconName(icon)) {
30    iconNode =
31      icon === "paperclip" ? (
32        <IconPaperclip className={iconClassName} strokeWidth={2} />
33      ) : (
34        <IconPlus className={iconClassName} strokeWidth={2} />
35      );
36  } else {
37    iconNode = icon;
38  }
39 
40  return (
41    <button
42      type="button"
43      onClick={onClick}
44      className="size-7 rounded-full flex items-center justify-center hover:bg-muted transition-colors cursor-pointer"
45      aria-label="Attach"
46    >
47      {iconNode}
48    </button>
49  );
50});