Composants de page pour une structure coherente avec en-tete, actions et contenu
Les composants Layout permettent de creer facilement des pages avec un rendu coherent dans Nowts.
Il y a 6 composants :
Layout : conteneur principal qui definit la mise en page
size?: "sm" | "default" | "lg" | "xl"default (max-width: 1024px) - largeur 1024pxsm (max-width: 768px) - largeur compactelg (max-width: 1792px) - grande largeurxl (max-width: 1400px) - tres grande largeurLayoutHeader : en-tete de page contenant le titre et la description
LayoutTitle : titre de page (utilise la variante Typography h2)
LayoutHeaderLayoutDescription : description de page (utilise Typography par defaut)
LayoutHeaderLayoutActions : conteneur des boutons d'action
LayoutContent : zone de contenu principale de la page
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 page</LayoutTitle>
<LayoutDescription>Description de la page</LayoutDescription>
</LayoutHeader>
<LayoutActions className="gap-2">
<Button variant="outline">Supprimer</Button>
<Button>Creer</Button>
</LayoutActions>
<LayoutContent className="flex flex-col gap-4">
<Typography variant="large">
Voici le contenu de la page avec des cartes, du texte, etc.
</Typography>
<Card>
<CardHeader>
<CardTitle>Contenu de la page</CardTitle>
<CardDescription>
Description de contenu supplementaire.
</CardDescription>
</CardHeader>
</Card>
</LayoutContent>
</Layout>
);
}Tous les composants acceptent les proprietes HTML standard (className, style, etc.) via ComponentPropsWithoutRef.
type LayoutProps = ComponentPropsWithoutRef<"div"> & {
size?: "sm" | "default" | "lg" | "xl";
};type Props = ComponentPropsWithoutRef<"div">;type LayoutTitleProps = ComponentPropsWithoutRef<"h1">;type LayoutDescriptionProps = ComponentPropsWithoutRef<"p">;