HeaderContent

En-tête de page avec titre, description et bouton d'action optionnel. Utilisé dans les pages d'administration pour présenter la section et déclencher une action principale (ajout, création, etc.).

Démo en direct — titre + description

Gestion des utilisateurs

Gérer les utilisateurs du système

Affichage simple avec titre et description. Aucun bouton d'action.

Démo en direct — avec bouton d'action

Cliquez sur le bouton pour incrémenter le compteur.

Nombre d'actions : 0

Gestion des projets

Ajoutez et suivez vos projets

Le bouton apparaît uniquement quand actionLabel et onAction sont fournis.

Démo en direct — avec icône dans le bouton

Liste des élèves

Consultez et gérez les élèves inscrits

L'icône s'affiche à gauche du label du bouton. Le bouton ouvre une modale.

Code source complet — copier-coller

Exemple complet d'une page d'administration utilisant HeaderContent, Table et Modal.

"use client";

import { useState } from "react";
import { HeaderContent, Table, Modal } from "@ramses1er/cbk-toolkit/client";
import type { Column } from "@ramses1er/cbk-toolkit/client";

type User = { id: number; fullname: string; email: string };

const columns: Column<User>[] = [
  { header: "Nom complet", accessor: "fullname" },
  { header: "Email", accessor: "email" },
];

const users: User[] = [
  { id: 1, fullname: "Alice Martin", email: "alice@email.com" },
  { id: 2, fullname: "Bernard Dupont", email: "bernard@email.com" },
];

export default function UsersPage() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <HeaderContent
        title="Gestion des utilisateurs"
        description="Gérer les utilisateurs du système"
        actionLabel="Ajouter un utilisateur"
        onAction={() => setOpen(true)}
      />

      <Table data={users} columns={columns} />

      <Modal
        title="Ajouter un utilisateur"
        isOpen={open}
        onClose={() => setOpen(false)}
      >
        <p className="text-gray-700">Formulaire d'ajout...</p>
      </Modal>
    </>
  );
}

Props

Prop	Type	Défaut	Description
title	string	requis	Titre principal de la section
description	string	requis	Texte sous le titre
actionLabel	string	—	Texte du bouton d'action
onAction	() => void	—	Callback du clic sur le bouton
icon	React.ReactNode	—	Icône dans le bouton (ex: lucide-react)

Le bouton n'apparaît que si actionLabel ET onAction sont tous deux fournis.

Utilisation — avec icône lucide-react

Le plus souvent, l'icône vient de lucide-react.

import { HeaderContent } from "@ramses1er/cbk-toolkit/client";
import { Plus } from "lucide-react";

<HeaderContent
  title="Gestion des projets"
  description="Ajoutez et suivez vos projets"
  actionLabel="Créer un projet"
  onAction={() => setOpen(true)}
  icon={<Plus className="w-4 h-4" />}
/>

Comportement

Le titre est affiché en bleu (text-blue-600)
La description apparaît en gris sous le titre en taille text-sm
Le bouton d'action n'est pas rendu si actionLabel ou onAction est manquant
Affichage responsive : sur mobile, le titre et le bouton sont en colonne ; sur desktop (md:) ils sont en ligne
L'icône est optionnelle et s'affiche dans un span de 16x16px