Genarrative/packages/shared/src/components/CanvasCardCornerActions.tsx

import { Info } from 'lucide-react';
import type { CSSProperties, Ref } from 'react';

import { PlatformIconButton } from './PlatformIconButton';

/** 画布卡片共用的类型标签与信息入口，不承接资源业务状态。 */
export function CanvasCardCornerActions({
  kindLabel,
  kindAriaLabel,
  kindClassName,
  infoLabel,
  style,
  kindRef,
  onKindClick,
  onInfoClick,
  infoPressed,
}: {
  kindLabel?: string | null;
  kindAriaLabel?: string;
  kindClassName?: string;
  infoLabel: string;
  style?: CSSProperties;
  kindRef?: Ref<HTMLSpanElement>;
  onKindClick?: () => void;
  onInfoClick: () => void;
  infoPressed?: boolean;
}) {
  return (
    <span
      className="shared-canvas-card-corners"
      style={style}
      onPointerDown={(event) => event.stopPropagation()}
      onClick={(event) => event.stopPropagation()}
      onKeyDown={(event) => event.stopPropagation()}
    >
      {kindLabel ? (
        <span
          ref={kindRef}
          className={`shared-canvas-card-kind ${kindClassName ?? ''}`}
          data-resource-type={kindLabel}
          role={onKindClick ? 'button' : undefined}
          tabIndex={onKindClick ? 0 : undefined}
          aria-label={kindAriaLabel}
          title={kindLabel}
          onClick={onKindClick}
          onKeyDown={(event) => {
            if (onKindClick && (event.key === 'Enter' || event.key === ' ')) {
              event.preventDefault();
              onKindClick();
            }
          }}
        >
          {kindLabel}
        </span>
      ) : null}
      <PlatformIconButton
        asChild="spanButton"
        variant="darkMini"
        className="shared-canvas-card-info"
        label={infoLabel}
        title="信息"
        aria-pressed={infoPressed}
        icon={<Info size={12} aria-hidden="true" />}
        onClick={onInfoClick}
      />
    </span>
  );
}