Composants de mise en page

Structurez les pages avec un en-tête, des actions et une zone de contenu cohérente.

Les composants Layout permettent de construire facilement des pages cohérentes dans NowStack.

Composants

Six composants sont disponibles :

Layout : conteneur principal
- Propriété : size?: "sm" | "default" | "lg" | "xl"
- default : largeur maximale de 1 024 px
- sm : largeur compacte de 768 px
- lg : grande largeur de 1 792 px
- xl : largeur maximale de 1 400 px
LayoutHeader : en-tête avec titre et description
- pleine largeur sur mobile, flexible sur ordinateur
LayoutTitle : titre de page avec la variante h2 de Typography
LayoutDescription : description avec la variante par défaut
LayoutActions : conteneur flexible pour les boutons d’action
LayoutContent : contenu principal occupant toute la largeur disponible

Utilisation

import {
  Layout,
  LayoutActions,
  LayoutContent,
  LayoutDescription,
  LayoutHeader,
  LayoutTitle,
} from "@/features/page/layout";

export default function RoutePage(props: PageProps<"/route/path">) {
  return (
    <Layout size="lg">
      <LayoutHeader>
        <LayoutTitle>Titre de la page</LayoutTitle>
        <LayoutDescription>Description de la page</LayoutDescription>
      </LayoutHeader>
      <LayoutActions className="gap-2">
        <Button variant="outline">Supprimer</Button>
        <Button>Créer</Button>
      </LayoutActions>
      <LayoutContent className="flex flex-col gap-4">
        <Typography variant="large">
          Contenu de la page avec des cartes, du texte, etc.
        </Typography>
        <Card>
          <CardHeader>
            <CardTitle>Contenu de la page</CardTitle>
            <CardDescription>Description complémentaire.</CardDescription>
          </CardHeader>
        </Card>
      </LayoutContent>
    </Layout>
  );
}

Propriétés

Tous les composants acceptent les propriétés HTML habituelles (className, style, etc.) via ComponentPropsWithoutRef.

Layout

type LayoutProps = ComponentPropsWithoutRef<"div"> & {
  size?: "sm" | "default" | "lg" | "xl";
};

LayoutHeader, LayoutActions, LayoutContent

type Props = ComponentPropsWithoutRef<"div">;

LayoutTitle

type LayoutTitleProps = ComponentPropsWithoutRef<"h1">;

LayoutDescription

type LayoutDescriptionProps = ComponentPropsWithoutRef<"p">;

Remarques

Cette approche crée des pages cohérentes sans complexifier leur structure.
Ces composants peuvent être utilisés dans les layouts Next.js.
Chaque page peut personnaliser son titre, sa description et ses actions.