Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-29 13:21:29 +04:00
Code Issues Projects Releases Wiki Activity
Files
ad2ed849dd38fc8a53b50cfc736b49d042813f74
tabler/preview/pages/playground.astro
T

269 lines
9.6 KiB
Plaintext
Raw Blame History

---
// Reuses committed components: ProgressSteps, Datepicker, Trending.
//
// NOTE (datepicker params): the source passes many params to ui/datepicker.html
// (date-min, date-max, selection-mode, placement, display-months-count,
// first-weekday, selected-dates). The current shared ui/datepicker.html is
// Litepicker-based and IGNORES all of them — the reference build renders only a
// plain input (id/value/layout/inline). Datepicker.astro mirrors that include, so
// we pass only the supported props and drop the rest, matching the reference.
//
// NOTE (page-libs): front matter is `page-libs: [vanilla-calendar-pro]`, but that
// lib is NOT registered in @tabler/core/libs.json, so BaseLayout emits no assets
// for it (matches the reference: empty PAGE LEVEL STYLES, no vanilla output).
// Passed through faithfully anyway.
//
// NOTE: the `page-header-link` front matter key ("Go to Team Settings") is inert —
// nothing in the layout/page-header consumes it, and it is absent from the
// reference. No prop for it.
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={['vanilla-calendar-pro']}>
<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">
<Datepicker id="playground-default" value="2024-01-15" />
</FormGroup>
<FormGroup label="With icon">
<Datepicker id="playground-icon" layout="icon" value="2024-01-15" />
</FormGroup>
<FormGroup label="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)">
<Datepicker id="playground-range" value="2024-06-15" />
</FormGroup>
<FormGroup label="Multiple selection">
<Datepicker id="playground-multiple" value="2024-01-15" />
</FormGroup>
<FormGroup label="Date 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">
<Datepicker id="playground-placement-left" value="2024-01-15" />
</FormGroup>
<FormGroup label="Center placement">
<Datepicker id="playground-placement-center" value="2024-01-15" />
</FormGroup>
<FormGroup label="Right placement">
<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">
<Datepicker id="playground-multiple-months" value="2024-01-15" />
</FormGroup>
<FormGroup label="Custom first weekday (Monday)">
<Datepicker id="playground-weekday" value="2024-01-15" />
</FormGroup>
<FormGroup label="With pre-selected dates">
<Datepicker id="playground-preselected" />
</FormGroup>
</div>
<div class="col-12">
<h4 class="mb-3">Inline Datepicker</h4>
<FormGroup label="Inline calendar">
<Datepicker id="playground-inline" inline value="2024-01-15" />
</FormGroup>
<FormGroup label="Inline with multiple selection">
<Datepicker id="playground-inline-multiple" inline value="2024-01-15" />
</FormGroup>
</div>
</div>
</CardBody>
</Card>
</div>
<div class="col-8">
<Card>
<CardBody>
<p class="card-title mb-4">Cohort Statistics</p>
<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>
Reference in New Issue View Git Blame Copy Permalink