tabler/preview/pages/patterns.astro

---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import BackgroundPattern from '@ui/BackgroundPattern.astro'
import site from '@data/site.json'

const patternColors = Object.keys(site.colors)
const patternSizes = ['sm', 'md', 'lg', 'xl'] as const

const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'lines-vertical', 'grid', 'grid-diagonal', 'blueprint', 'circles', 'diagonal-stripes', 'diagonal-stripes-2', 'zigzag', 'vertical-stripes', 'horizontal-stripes'] as const
---

<DefaultLayout title="Patterns" pageHeader="Patterns" pageMenu="base.patterns">
  <div class="row row-cards">
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Pattern types</CardTitle>
          <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
            {
              patterns.map((pattern) => (
                <div class="col">
                  <BackgroundPattern pattern={pattern} class="rounded mb-3" style="height: 8rem;" />
                  <code>.bg-pattern-{pattern}</code>
                </div>
              ))
            }
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Pattern colors</CardTitle>
          <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
            {
              patternColors.map((color) => (
                <div class="col">
                  <BackgroundPattern pattern="rectangles" color={color} class="rounded mb-3" style="height: 8rem;" />
                  <code>.bg-pattern-{color}</code>
                </div>
              ))
            }
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Pattern sizes</CardTitle>
          <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
            {
              patternSizes.map((size) => (
                <div class="col">
                  <BackgroundPattern pattern="diagonal" size={size} class="rounded mb-3" style="height: 8rem;" />
                  <code>.bg-pattern-{size}</code>
                </div>
              ))
            }
          </div>
        </CardBody>
      </Card>
    </div>
  </div>
</DefaultLayout>