Component composition

Plumile UI components are designed to compose with the router. Use Link for semantic navigation, LinkButton for button-like links, and status primitives for compact metadata.

import { type JSX } from 'react';
import { Link } from '@plumile/router';
import { Badge, InfoTile, LinkButton, StatusBadge } from '@plumile/ui';

import * as styles from './ProjectList.css.js';

type Project = {
  id: string;
  name: string;
  status: 'ACTIVE' | 'PAUSED';
  openTaskCount: number;
};

export function ProjectList({ projects }: { projects: readonly Project[] }): JSX.Element {
  return (
    <div className={styles.list}>
      {projects.map((project) => (
        <article key={project.id} className={styles.item}>
          <div>
            <Link className={styles.titleLink} to={`/projects/${project.id}`}>
              {project.name}
            </Link>
            <div className={styles.metaRow}>
              <StatusBadge
                label={project.status}
                tone={project.status === 'ACTIVE' ? 'success' : 'warning'}
              />
              <Badge>{project.openTaskCount} open tasks</Badge>
            </div>
          </div>
          <InfoTile label="Tasks" value={project.openTaskCount} />
          <LinkButton to={`/projects/${project.id}/settings`} variant="secondary">
            Settings
          </LinkButton>
        </article>
      ))}
    </div>
  );
}

Keep navigation URLs in routing/url helpers when they are reused across multiple components. Components should compose those helpers rather than duplicate path construction.