| 555 | } |
| 556 | |
| 557 | function IconTextButton({ |
| 558 | title, |
| 559 | action, |
| 560 | shortcut, |
| 561 | showShortcut = false, |
| 562 | children, |
| 563 | onClick, |
| 564 | danger = false |
| 565 | }: { |
| 566 | title: string |
| 567 | action?: string |
| 568 | shortcut?: string |
| 569 | showShortcut?: boolean |
| 570 | children: JSX.Element |
| 571 | onClick: () => void |
| 572 | danger?: boolean |
| 573 | }): JSX.Element { |
| 574 | return ( |
| 575 | <button |
| 576 | type="button" |
| 577 | aria-label={title} |
| 578 | aria-keyshortcuts={shortcut === '↵' ? 'Enter' : shortcut} |
| 579 | data-comment-card-control |
| 580 | data-comment-action={action} |
| 581 | onMouseDown={(event) => { |
| 582 | event.stopPropagation() |
| 583 | }} |
| 584 | onClick={(event) => { |
| 585 | event.preventDefault() |
| 586 | event.stopPropagation() |
| 587 | onClick() |
| 588 | }} |
| 589 | className={[ |
| 590 | 'group relative z-10 flex h-8 w-8 items-center justify-center rounded-md transition-colors', |
| 591 | danger |
| 592 | ? 'text-[rgb(var(--z-red))] hover:bg-red-500/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500/35' |
| 593 | : 'text-ink-500 hover:bg-paper-200 hover:text-ink-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/45' |
| 594 | ].join(' ')} |
| 595 | > |
| 596 | {children} |
| 597 | {shortcut && ( |
| 598 | <kbd |
| 599 | aria-hidden="true" |
| 600 | className={[ |
| 601 | 'pointer-events-none absolute -bottom-1 -right-1 flex h-3.5 min-w-3.5 items-center justify-center rounded border border-paper-300/80 bg-paper-50 px-1 font-mono text-2xs leading-none text-ink-600 shadow-[0_4px_10px_-8px_rgb(var(--z-shadow)/0.9)] transition-opacity', |
| 602 | showShortcut ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100' |
| 603 | ].join(' ')} |
| 604 | > |
| 605 | {shortcut} |
| 606 | </kbd> |
| 607 | )} |
| 608 | <span |
| 609 | aria-hidden="true" |
| 610 | className="pointer-events-none absolute bottom-full left-1/2 z-20 mb-1.5 -translate-x-1/2 whitespace-nowrap rounded-md border border-paper-300/75 bg-paper-100 px-2 py-1 text-xs font-medium text-ink-800 opacity-0 shadow-float transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100" |
| 611 | > |
| 612 | {title} |
| 613 | </span> |
| 614 | </button> |