Section
Section, SplitView and AuthLayout: page structure with space instead of boxes.
Usage
Last 30 days
12,480requests
$184.20total spend
<div className="w-full">
<SplitView
aside={
<>
<Select
label="Measure"
options={[
{ value: "spend", label: "Spend" },
{ value: "requests", label: "Requests" },
]}
defaultValue="spend"
fullWidth
/>
<Select
label="Group by"
options={[
{ value: "model", label: "Model" },
{ value: "key", label: "Key" },
]}
defaultValue="model"
fullWidth
/>
</>
}
>
<Section title="Usage" description="Last 30 days">
<MetricRow>
<Stat value="12,480" unit="requests" />
<Stat value="$184.20" unit="total spend" />
</MetricRow>
</Section>
</SplitView>
</div>import { Section, SplitView, AuthLayout } from "@logicplanes/kaeso-ui";Props
actionsReactNodeActions at the end of the heading row.
childrenReactNodeThe section's content.
descriptionReactNodeOne sentence under the heading.
spacing"none" | "default" = defaultThe space above the section: the default, or none.
titleReactNodeThe section's heading.