Detail Header

// React (resource-fe, and every other React MFE that adopts this pattern)
import { Tooltip } from 'antd';
import type { ReactNode } from 'react';
import styles from './app-detail-header.module.css';

export type DetailHeaderStat = {
  label: string;
  value: ReactNode;
  tone?: 'default' | 'ok' | 'warn' | 'info' | 'muted';
  small?: boolean;
};

export type DetailHeaderMeta = {
  text: ReactNode;
  mono?: boolean;
  tooltip?: string;
};

type AppDetailHeaderProps = {
  name: ReactNode;
  description?: ReactNode;
  tags?: ReactNode;
  stats?: DetailHeaderStat[];
  meta?: DetailHeaderMeta[];
};

const AppDetailHeader = ({ name, description, tags, stats, meta }: AppDetailHeaderProps) => (
  <section className={styles.header}>
    <div className={styles.top}>
      <div className={styles.titleBlock}>
        <span className={styles.name}>{name}</span>
        {description && <span className={styles.muted}>{description}</span>}
      </div>

      {!!stats?.length && (
        <div className={styles.statLine}>
          {stats.map((s) => (
            <span key={s.label} className={styles.statInline}>
              <span className={styles.statLabel}>{s.label}:</span>
              <span className={`${styles.statValue} ${s.small ? styles.statValueSmall : ''} ${s.tone && s.tone !== 'default' ? styles[s.tone] : ''}`}>{s.value}</span>
            </span>
          ))}
        </div>
      )}
    </div>

    {tags && <div className={styles.tags}>{tags}</div>}

    {!!meta?.length && (
      <div className={styles.meta}>
        {meta.map((m, i) => {
          const content = <span className={m.mono ? styles.mono : styles.muted}>{m.text}</span>;
          return m.tooltip ? <Tooltip key={i} title={m.tooltip}>{content}</Tooltip> : <span key={i}>{content}</span>;
        })}
      </div>
    )}
  </section>
);

export default AppDetailHeader;