Custom Header Override

// Subtitle Override
type SubtitleResolver = (entity: Record<string, any>) => { text: string };

// Badge Override
interface BadgeObject {
  text: string;                     // Required: Text to display
  skin?: BadgeSkin;                 // Optional: Visual styling
  prefixIcon?: React.ReactElement;  // Optional: Icon before text (from @wix/wix-ui-icons-common)
  suffixIcon?: React.ReactElement;  // Optional: Icon after text (from @wix/wix-ui-icons-common)
}

type BadgeSkin = 'success' | 'warning' | 'destructive' | 'neutral' | 'premium';

type BadgesResolver = (entity: Record<string, any>) => BadgeObject[];

{
  "entityPage": {
    "title": {
      "text": "Entity Details",
      "badges": {
        "id": "entityPageHeaderBadges"  // Must match override key
      }
    },
    "subtitle": {
      "text": "Default subtitle text",
      "id": "entityPageHeaderSubtitle"  // Must match override key
    }
  }
}

// components/entityPageHeaderSubtitle/entityPageHeaderSubtitle.ts
export const entityPageHeaderSubtitle = (entity: Record<string, any>) => {
  return { text: `Created by ${entity.owner || 'Unknown'} on ${entity.date || 'N/A'}` };
};

// components/entityPageHeaderSubtitle/index.ts
import { entityPageHeaderSubtitle } from './entityPageHeaderSubtitle';
export const useEntityPageHeaderSubtitle = () => ({ entityPageHeaderSubtitle });

// components/entityPageHeaderBadges/entityPageHeaderBadges.ts
export const entityPageHeaderBadges = (entity: Record<string, any>) => {
  const badges = [];

  // Add status badge
  if (entity.isActive) {
    badges.push({ text: 'Active', skin: 'success' });
  } else {
    badges.push({ text: 'Inactive', skin: 'neutral' });
  }

  // Add premium badge if applicable
  if (entity.isPremium) {
    badges.push({ text: 'Premium', skin: 'premium' });
  }

  // Add warning badge if needed
  if (entity.needsAttention) {
    badges.push({ text: 'Needs Attention', skin: 'warning' });
  }

  return badges;
};

// components/entityPageHeaderBadges/index.ts
import { entityPageHeaderBadges } from './entityPageHeaderBadges';
export const useEntityPageHeaderBadges = () => ({ entityPageHeaderBadges });

// 1. Add import (keep all existing imports)
import { useEntityPageHeaderSubtitle } from './components/entityPageHeaderSubtitle';

// 2. Add hook call (keep all existing hook calls)
const entityPageHeaderSubtitle = useEntityPageHeaderSubtitle();

// 3. Add entityPageHeaderSubtitle to AutoPatternsOverridesProvider value (keep ALL existing overrides)

// 1. Add import (keep all existing imports)
import { useEntityPageHeaderBadges } from './components/entityPageHeaderBadges';

// 2. Add hook call (keep all existing hook calls)
const entityPageHeaderBadges = useEntityPageHeaderBadges();

// 3. Add entityPageHeaderBadges to AutoPatternsOverridesProvider value (keep ALL existing overrides)