แพทเทิร์น

<div className="ds-canvas" style={{ minHeight: "100dvh", display: "grid", placeItems: "center" }}>
  <Card style={{ width: "min(400px, 100%)" }}>
    <CardHeader>
      <Wordmark />
      <CardTitle as="h1">เข้าสู่ระบบ</CardTitle>
      <CardDescription>เรียนต่อจากที่ค้างไว้</CardDescription>
    </CardHeader>
    <CardBody>
      <form className="ds-stack" data-gap="md">
        <Field label="อีเมล"><Input type="email" autoComplete="email" /></Field>
        <Field label="รหัสผ่าน" aside={<ArrowLink href="/reset" subtle plain>ลืมรหัสผ่าน</ArrowLink>}>
          <Input type="password" autoComplete="current-password" />
        </Field>
        <Button type="submit" variant="primary" full>เข้าสู่ระบบ</Button>
        <Separator />
        <Button variant="outline" full><GoogleLogo />ดำเนินการต่อด้วย Google</Button>
      </form>
    </CardBody>
  </Card>
</div>

<div className="pattern-settings">
  <nav aria-label="ตั้งค่า"><Stack gap="xs">{/* links with aria-current */}</Stack></nav>
  <Stack gap="lg">
    <section><h2 className="ds-h3">โปรไฟล์</h2>{/* Fields */}</section>
    <Separator />
    <section><h2 className="ds-h3">การแจ้งเตือน</h2>{/* Switches: apply at once */}</section>
    <Separator />
    <section><h2 className="ds-h3">ลบบัญชี</h2><Button variant="danger">ลบบัญชี</Button></section>
  </Stack>
</div>

<Stack gap="lg">
  <Cluster justify="between">
    <Cluster role="group" aria-label="กรองตามหัวข้อ">
      {topics.map(t => <Tag key={t} pressed={active === t} onClick={() => setActive(t)}>{t}</Tag>)}
    </Cluster>
    <Segmented name="view" legend="มุมมอง" size="sm" defaultValue="grid" options={…} />
  </Cluster>
  <Grid min="220px">{courses.map(c => <CourseCard key={c.slug} {...c} />)}</Grid>
  <Pagination page={1} total={4} href={p => `?page=${p}`} />
</Stack>

<Grid min="200px" gap="md">
  {projects.map(p => (
    <Poster key={p.slug} href={`/projects/${p.slug}`} glyph={p.symbol}
      title={p.title} description={p.excerpt} meta={[p.category, p.year]} tint={p.tint} />
  ))}
</Grid>

<div className="pattern-plans">
  <Card className="pattern-plan">…</Card>
  <Card className="pattern-plan" tone="inverse">…</Card>
  <Card className="pattern-plan">…</Card>
</div>

<Grid min="180px">
  <Card><CardBody><Stat label="เวลาเรียนสัปดาห์นี้" value="4 ชม. 10 นาที" delta="+38 นาที" trend="up" /></CardBody></Card>
  …
</Grid>
<Card>
  <CardHeader><CardTitle>เรียนต่อ</CardTitle></CardHeader>
  <CardBody><Progress label="Agentic Workflows" value={7} max={12} showValue /></CardBody>
</Card>
<EmptyState title="ยังไม่มีงานที่ต้องส่ง" />

<Stepper current={0} steps={[{ label: "เลือกเวลา" }, { label: "รายละเอียด" }, { label: "ชำระเงิน" }, { label: "ยืนยัน" }]} />
<ChoiceGroup legend="เวลาที่ว่าง พฤหัสบดี 30 ต.ค.">
  {slots.map(s => <Radio key={s} name="slot" value={s} label={s} />)}
</ChoiceGroup>