forked from jappel/leistungsbilanz-ts
e394ff93f4
- New IconButton/IconButtonSeparator component based on lucide-react. - Toolbar: icon plus text, grouped into history, view and insert blocks. - Group headers: compact icons for add circuit, upstream fuse (VS), group RCD (FI), edit, move up/down, renumber and delete; the header no longer overflows the grid. - Rows: add device, delete circuit (trash) and delete device (ListX). - The previous German labels remain accessible names and tooltips; destructive actions highlight in the danger color. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import type { LucideIcon } from "lucide-react";
|
|
import type { ReactNode } from "react";
|
|
|
|
/**
|
|
* Compact editor button with a lucide icon. `label` is always the accessible
|
|
* name; it is also the tooltip unless a more specific `title` is given.
|
|
* With `showLabel` the label (or `children`) is rendered next to the icon.
|
|
*/
|
|
export function IconButton({
|
|
icon: Icon,
|
|
label,
|
|
title,
|
|
onClick,
|
|
disabled,
|
|
variant = "default",
|
|
showLabel = false,
|
|
children,
|
|
className,
|
|
tabIndex,
|
|
ariaExpanded,
|
|
ariaControls,
|
|
}: {
|
|
icon: LucideIcon;
|
|
label: string;
|
|
title?: string;
|
|
onClick: () => void;
|
|
disabled?: boolean;
|
|
variant?: "default" | "danger" | "primary";
|
|
showLabel?: boolean;
|
|
children?: ReactNode;
|
|
className?: string;
|
|
tabIndex?: number;
|
|
ariaExpanded?: boolean;
|
|
ariaControls?: string;
|
|
}) {
|
|
return (
|
|
<button
|
|
aria-controls={ariaControls}
|
|
aria-expanded={ariaExpanded}
|
|
aria-label={showLabel ? undefined : label}
|
|
className={`icon-button icon-button-${variant}${className ? ` ${className}` : ""}`}
|
|
disabled={disabled}
|
|
onClick={onClick}
|
|
tabIndex={tabIndex}
|
|
title={title ?? label}
|
|
type="button"
|
|
>
|
|
<Icon aria-hidden="true" size={15} strokeWidth={2} />
|
|
{showLabel ? <span>{children ?? label}</span> : children}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
/** Thin vertical divider between groups of icon buttons. */
|
|
export function IconButtonSeparator() {
|
|
return <span aria-hidden="true" className="icon-button-separator" />;
|
|
}
|