class-bound-components-sample.tsx

const Breadcrumb = classBound.ol('breadcrumb');
const BreadcrumbItem = classBound.li('breadcrumb-item', { isActive: 'active' });
const BreadcrumbLink = classBound.a('breadcrumb-link');

const BreadcrumbContainer: React.FC<{ items: Item[]; activeId: number }> =
  ({ items, activeId }) => (
    <Breadcrumb aria-label="breadcrumb">
      {items.map(item => {
        <BreadcrumbItem key={item.id} isActive={item.id === activeId}>
          <BreadcrumbLink href={item.url} target="_blank">{item.name}</BreadcrumbLink>
        </BreadcrumbItem>
      })}
    </Breadcrumb>
  );