---
import Typography from '@/components/typography.astro';

const text = 'A quick brown fox jumps over the lazy dog';
---

<div class="space-y-10 p-5">
  <div>
    <p class="mb-2 font-mono">paragraph (default)</p>
    <Typography>{text}</Typography>
  </div>
  <div>
    <p class="mb-2 font-mono">main-title</p>
    <Typography variant="main-title">{text}</Typography>
  </div>
  <div>
    <p class="mb-2 font-mono">main-subtitle</p>
    <Typography variant="main-subtitle">{text}</Typography>
  </div>
  <div>
    <p class="mb-2 font-mono">section-title</p>
    <Typography variant="section-title">{text}</Typography>
  </div>
  <div>
    <p class="mb-2 font-mono">section-subtitle</p>
    <Typography variant="section-subtitle">{text}</Typography>
  </div>
  <div>
    <p class="mb-2 font-mono">item-title</p>
    <Typography variant="item-title">{text}</Typography>
  </div>
  <div>
    <p class="mb-2 font-mono">item-title-suffix</p>
    <Typography variant="item-title-suffix">{text}</Typography>
  </div>
  <div>
    <p class="mb-2 font-mono">item-subtitle</p>
    <Typography variant="item-subtitle">{text}</Typography>
  </div>
  <div>
    <p class="mb-2 font-mono">tile-title</p>
    <Typography variant="tile-title">{text}</Typography>
  </div>
  <div>
    <p class="mb-2 font-mono">tile-subtitle</p>
    <Typography variant="tile-subtitle">{text}</Typography>
  </div>
</div>