preview/pages/playground.astro - dev - githubmirror/tabler

preview/pages/playground.astro
238 строк10 KB
Paweł Kuna
Fix skip links, focus rings, and button semantics for keyboard a11y (#2779)
11 авг 2026, 16:28
11 авг 2026, 16:28dd4214b
---
import Subheader from '@ui/Subheader.astro'
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import ButtonList from '@ui/ButtonList.astro'
import Card from '@ui/Card.astro'
import CardHeader from '@ui/CardHeader.astro'
import CardBody from '@ui/CardBody.astro'
import ProgressSteps from '@ui/ProgressSteps.astro'
import Datepicker from '@ui/Datepicker.astro'
import FormGroup from '@ui/FormGroup.astro'
import Trending from '@ui/Trending.astro'
---

<DefaultLayout title="Playground" pageHeader="Project Settings" pageLibs={['litepicker']}>
  <div class="row row-cards row-deck">
    <div class="col-12">
      <Card>
        <CardBody>
          <div class="d-flex flex-wrap gap-4">
            <div class="bg-pattern-diagonal w-10 h-10 border rounded"></div>
            <div class="bg-pattern-diagonal-2 w-10 h-10 border rounded"></div>
            <div class="bg-pattern-dots w-10 h-10 border rounded"></div>
            <div class="bg-pattern-lines w-10 h-10 border rounded"></div>
            <div class="bg-pattern-rectangles w-10 h-10 border rounded"></div>
            <div class="bg-pattern-lines-vertical w-10 h-10 border rounded"></div>
            <div class="bg-pattern-grid w-10 h-10 border rounded"></div>
            <div class="bg-pattern-grid-diagonal w-10 h-10 border rounded"></div>
            <div class="bg-pattern-blueprint w-10 h-10 border rounded"></div>
            <div class="bg-pattern-cross-dots w-10 h-10 border rounded"></div>
            <div class="bg-pattern-diagonal-stripes w-10 h-10 border rounded"></div>
            <div class="bg-pattern-diagonal-stripes-2 w-10 h-10 border rounded"></div>
            <div class="bg-pattern-zigzag w-10 h-10 border rounded"></div>
            <div class="bg-pattern-vertical-stripes w-10 h-10 border rounded"></div>
            <div class="bg-pattern-horizontal-stripes w-10 h-10 border rounded"></div>
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-6">
      <Card>
        <CardBody>
          <ButtonList>
            <a href="" class="btn" style="border-color: var(--tblr-border-color);">Button</a>
            <a href="" class="btn" style="border-color: var(--tblr-border-color-translucent);">Button</a>
            <a href="" class="btn" style="border-color: var(--tblr-border-dark-color);">Button</a>
            <a href="" class="btn" style="border-color: var(--tblr-border-dark-color-translucent);">Button</a>
            <a href="" class="btn btn-primary">Button</a>
          </ButtonList>
          <ButtonList class="mt-4">
            <a href="" class="btn">Button</a>
            <a href="" class="btn">Button</a>
            <a href="" class="btn">Button</a>
            <a href="" class="btn">Button</a>
            <a href="" class="btn btn-primary">Button</a>
          </ButtonList>
        </CardBody>
      </Card>
    </div>

    <div class="col-3">
      <Card>
        <CardBody> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </CardBody>
      </Card>
    </div>

    <div class="col-6">
      <Card>
        <CardBody> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </CardBody>
      </Card>
    </div>

    <div class="col-12">
      <Card>
        <CardBody> Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur earum perferendis expedita suscipit quasi maiores quas sint harum dolor! Dolorem cumque autem error ea fuga. Ea excepturi temporibus officiis perspiciatis. </CardBody>
      </Card>
    </div>

    <div class="col-12">
      <Card>
        <CardBody>
          <div class="space-y">
            <ProgressSteps labels={['Step A', 'Step B', 'Step C']} active={2} />
            <ProgressSteps count={9} active={4} />
            <ProgressSteps count={9} active={9} color="success" />
          </div>
        </CardBody>
      </Card>
    </div>

    <div class="col-12">
      <Card>
        <CardHeader title="Datepicker Examples" />
        <CardBody>
          <div class="row g-4">
            <div class="col-md-6">
              <h4 class="mb-3">Basic Datepicker</h4>
              <FormGroup label="Default datepicker" for="datepicker-playground-default">
                <Datepicker id="playground-default" value="2024-01-15" />
              </FormGroup>
              <FormGroup label="With icon" for="datepicker-playground-icon">
                <Datepicker id="playground-icon" layout="icon" value="2024-01-15" />
              </FormGroup>
              <FormGroup label="Icon prepend" for="datepicker-playground-icon-prepend">
                <Datepicker id="playground-icon-prepend" layout="icon-prepend" value="2024-01-15" />
              </FormGroup>
            </div>
            <div class="col-md-6">
              <h4 class="mb-3">Datepicker Options</h4>
              <FormGroup label="With date range (min/max)" for="datepicker-playground-range">
                <Datepicker id="playground-range" value="2024-06-15" />
              </FormGroup>
              <FormGroup label="Multiple selection" for="datepicker-playground-multiple">
                <Datepicker id="playground-multiple" value="2024-01-15" />
              </FormGroup>
              <FormGroup label="Date range selection" for="datepicker-playground-range-selection">
                <Datepicker id="playground-range-selection" value="2024-01-15" />
              </FormGroup>
            </div>
            <div class="col-md-6">
              <h4 class="mb-3">Placement Options</h4>
              <FormGroup label="Left placement" for="datepicker-playground-placement-left">
                <Datepicker id="playground-placement-left" value="2024-01-15" />
              </FormGroup>
              <FormGroup label="Center placement" for="datepicker-playground-placement-center">
                <Datepicker id="playground-placement-center" value="2024-01-15" />
              </FormGroup>
              <FormGroup label="Right placement" for="datepicker-playground-placement-right">
                <Datepicker id="playground-placement-right" value="2024-01-15" />
              </FormGroup>
            </div>
            <div class="col-md-6">
              <h4 class="mb-3">Advanced Options</h4>
              <FormGroup label="Multiple months" for="datepicker-playground-multiple-months">
                <Datepicker id="playground-multiple-months" value="2024-01-15" />
              </FormGroup>
              <FormGroup label="Custom first weekday (Monday)" for="datepicker-playground-weekday">
                <Datepicker id="playground-weekday" value="2024-01-15" />
              </FormGroup>
              <FormGroup label="With pre-selected dates" for="datepicker-playground-preselected">
                <Datepicker id="playground-preselected" />
              </FormGroup>
            </div>
            <div class="col-12">
              <h4 class="mb-3">Inline Datepicker</h4>
              {/* inline mode renders a calendar div with no backing text input — nothing to point `for` at */}
              <FormGroup label="Inline calendar" associate={false}>
                <Datepicker id="playground-inline" inline value="2024-01-15" />
              </FormGroup>
              <FormGroup label="Inline with multiple selection" associate={false}>
                <Datepicker id="playground-inline-multiple" inline value="2024-01-15" />
              </FormGroup>
            </div>
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-8">
      <Card>
        <CardBody>
          <h3 class="card-title mb-4">Cohort Statistics</h3>
          <dl class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
            <div class="col">
              <Subheader as="dt">Total Users</Subheader>
              <dd class="mt-1 d-flex align-items-baseline">
                <span class="h2 mb-0">25,784</span>
                <Trending value={23} class="ms-2" />
              </dd>
            </div>

            <div class="col">
              <Subheader as="dt">Average CSAT Score</Subheader>
              <dd class="mt-1 d-flex align-items-baseline">
                <span class="h2 mb-0">86.9</span>
                <Trending value={-4} class="ms-2" />
              </dd>
            </div>

            <div class="col">
              <Subheader as="dt">Average Response Time</Subheader>
              <dd class="mt-1 d-flex align-items-baseline">
                <span class="h2 mb-0">7.2m</span>
                <Trending value={8} class="ms-2" />
              </dd>
            </div>

            <div class="col">
              <Subheader as="dt">Total Tickets</Subheader>
              <dd class="mt-1 d-flex align-items-baseline">
                <span class="h2 mb-0">51,960</span>
                <Trending value={-7} class="ms-2" />
              </dd>
            </div>

            <div class="col">
              <Subheader as="dt">Resolution Rate</Subheader>
              <dd class="mt-1 d-flex align-items-baseline">
                <span class="h2 mb-0">90.0%</span>
                <Trending value={0} class="ms-2" />
              </dd>
            </div>

            <div class="col">
              <Subheader as="dt">Total Cohorts</Subheader>
              <dd class="mt-1 d-flex align-items-baseline">
                <span class="h2 mb-0">10</span>
                <Trending value={15} class="ms-2" />
              </dd>
            </div>

            <div class="col">
              <Subheader as="dt">Avg. Handling Time</Subheader>
              <dd class="mt-1 d-flex align-items-baseline">
                <span class="h2 mb-0">14.1m</span>
                <Trending value={-12} class="ms-2" />
              </dd>
            </div>

            <div class="col">
              <Subheader as="dt">First Contact Resolution</Subheader>
              <dd class="mt-1 d-flex align-items-baseline">
                <span class="h2 mb-0">80.0%</span>
                <Trending value={6} class="ms-2" />
              </dd>
            </div>

            <div class="col">
              <Subheader as="dt">Retention Rate</Subheader>
              <dd class="mt-1 d-flex align-items-baseline">
                <span class="h2 mb-0">28.0%</span>
                <Trending value={-3} class="ms-2" />
              </dd>
            </div>
          </dl>
        </CardBody>
      </Card>
    </div>
  </div>
</DefaultLayout>