60 lines
3.2 KiB
TypeScript
60 lines
3.2 KiB
TypeScript
import { useState } from "react";
|
|
import { Card, CardGrid } from "./Card";
|
|
import { Button, Checkbox, Counter, SectionHeading } from "./primitives";
|
|
|
|
export function ContainerShowcase() {
|
|
const [water, setWater] = useState(3);
|
|
const [read, setRead] = useState(false);
|
|
|
|
return (
|
|
<section className="ds-section ds-container-showcase" id="containers" aria-labelledby="containers-title">
|
|
<SectionHeading id="containers-title" title="Containers & layout" />
|
|
|
|
<div className="ds-spec-heading ds-spec-heading--spaced">
|
|
<h3>Card surfaces</h3>
|
|
<span className="ds-code">Card · soft / outlined</span>
|
|
</div>
|
|
<CardGrid>
|
|
<Card headingLevel={4} heading="Soft surface">
|
|
<p>A neutral fill gathers related content without adding another divider. Use it for summaries, guidance, and a small set of actions.</p>
|
|
</Card>
|
|
<Card headingLevel={4} variant="outlined" heading="Outlined surface">
|
|
<p>A fine border defines a standalone group on white. Useful when a form or a focused task needs its own space.</p>
|
|
</Card>
|
|
</CardGrid>
|
|
|
|
<div className="ds-spec-heading ds-spec-heading--spaced">
|
|
<h3>Bento layout</h3>
|
|
<span className="ds-code">CardGrid · bento</span>
|
|
</div>
|
|
<CardGrid layout="bento" aria-label="Interactive bento layout example">
|
|
<Card
|
|
headingLevel={4}
|
|
span="featured"
|
|
heading="Today"
|
|
>
|
|
<div className="ds-card-summary" role="status">
|
|
<p className="type-display">{Number(water === 8) + Number(read)}<span className="type-title ds-muted"> / 2</span></p>
|
|
<p>habits complete</p>
|
|
</div>
|
|
</Card>
|
|
<Card headingLevel={4} eyebrow="DAILY / 8 GLASSES" heading="Drink water" variant="outlined">
|
|
<Counter label="bento glasses of water" value={water} target={8} onChange={setWater} />
|
|
<p className="type-small" role="status">{water === 8 ? "Complete for today" : `${8 - water} glasses to go`}</p>
|
|
</Card>
|
|
<Card headingLevel={4} heading="Read a little" variant="outlined">
|
|
<Checkbox label="Reading done" checked={read} onChange={(event) => setRead(event.target.checked)} />
|
|
</Card>
|
|
<Card headingLevel={4} span="wide" heading="Demo">
|
|
<p>Changes to these examples are not saved.</p>
|
|
</Card>
|
|
</CardGrid>
|
|
<div className="ds-container-guidance">
|
|
<p className="ds-footnote">Equal grids suit peer items. Bento gives one summary more room; smaller cards hold short tasks. Both collapse in reading order on small screens. Use one surface per group, with spacing inside and no shadows.</p>
|
|
<Button variant="text" onClick={() => { setWater(3); setRead(false); }}>Reset card examples ↺</Button>
|
|
</div>
|
|
<pre className="ds-code ds-container-code"><code>{'<CardGrid layout="bento">\n <Card heading="Today" headingLevel={4} span="featured">…</Card>\n <Card heading="Water" headingLevel={4} variant="outlined">…</Card>\n <Card heading="Reading" headingLevel={4} variant="outlined">…</Card>\n <Card heading="A reminder" headingLevel={4} span="wide">…</Card>\n</CardGrid>'}</code></pre>
|
|
</section>
|
|
);
|
|
}
|