Composition de composants

Les composants Plumile UI sont concus pour se composer avec le router. Utilisez Link pour la navigation semantique, LinkButton pour les liens visuellement boutons et les primitives de statut pour les metadonnees compactes.

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>
  );
}

Gardez les URLs de navigation dans des helpers route/url lorsqu’elles sont reutilisees. Les composants doivent composer ces helpers plutot que dupliquer la construction de chemins.