Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-07 20:02:23 +04:00
Code Issues Projects Releases Wiki Activity
Files
d8956a06d6e19632427ce3c349203d27aad78de1
tabler/preview/pages/playground.astro
T
Paweł Kuna d8956a06d6 Migrate preview and docs packages from Eleventy to Astro (#2694) 
Co-authored-by: Bartek <xbartoszdobija@gmail.com>
2026-07-28 00:09:02 +02:00

279 lines
10 KiB
Plaintext
Raw Blame History

---
// Port of preview/pages/playground.html (layout: default).
// 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 DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import ProgressSteps from '@shared/components/ui/ProgressSteps.astro';
import Datepicker from '@shared/components/ui/Datepicker.astro';
import Trending from '@shared/components/ui/Trending.astro';
---
<DefaultLayout title="Playground" pageHeader="Project Settings" pageLibs={['vanilla-calendar-pro']}>
<div class="row row-cards row-deck">
<div class="col-12">
<div class="card">
<div class="card-body">
<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>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="btn-list">
<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>
</div>
<div class="btn-list 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>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-body">
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.
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-body">
<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>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Datepicker Examples</h3>
</div>
<div class="card-body">
<div class="row g-4">
<div class="col-md-6">
<h4 class="mb-3">Basic Datepicker</h4>
<div class="mb-3">
<label class="form-label">Default datepicker</label>
<Datepicker id="playground-default" value="2024-01-15" />
</div>
<div class="mb-3">
<label class="form-label">With icon</label>
<Datepicker id="playground-icon" layout="icon" value="2024-01-15" />
</div>
<div class="mb-3">
<label class="form-label">Icon prepend</label>
<Datepicker id="playground-icon-prepend" layout="icon-prepend" value="2024-01-15" />
</div>
</div>
<div class="col-md-6">
<h4 class="mb-3">Datepicker Options</h4>
<div class="mb-3">
<label class="form-label">With date range (min/max)</label>
<Datepicker id="playground-range" value="2024-06-15" />
</div>
<div class="mb-3">
<label class="form-label">Multiple selection</label>
<Datepicker id="playground-multiple" value="2024-01-15" />
</div>
<div class="mb-3">
<label class="form-label">Date range selection</label>
<Datepicker id="playground-range-selection" value="2024-01-15" />
</div>
</div>
<div class="col-md-6">
<h4 class="mb-3">Placement Options</h4>
<div class="mb-3">
<label class="form-label">Left placement</label>
<Datepicker id="playground-placement-left" value="2024-01-15" />
</div>
<div class="mb-3">
<label class="form-label">Center placement</label>
<Datepicker id="playground-placement-center" value="2024-01-15" />
</div>
<div class="mb-3">
<label class="form-label">Right placement</label>
<Datepicker id="playground-placement-right" value="2024-01-15" />
</div>
</div>
<div class="col-md-6">
<h4 class="mb-3">Advanced Options</h4>
<div class="mb-3">
<label class="form-label">Multiple months</label>
<Datepicker id="playground-multiple-months" value="2024-01-15" />
</div>
<div class="mb-3">
<label class="form-label">Custom first weekday (Monday)</label>
<Datepicker id="playground-weekday" value="2024-01-15" />
</div>
<div class="mb-3">
<label class="form-label">With pre-selected dates</label>
<Datepicker id="playground-preselected" />
</div>
</div>
<div class="col-12">
<h4 class="mb-3">Inline Datepicker</h4>
<div class="mb-3">
<label class="form-label">Inline calendar</label>
<Datepicker id="playground-inline" inline value="2024-01-15" />
</div>
<div class="mb-3">
<label class="form-label">Inline with multiple selection</label>
<Datepicker id="playground-inline-multiple" inline value="2024-01-15" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-8">
<div class="card">
<div class="card-body">
<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">
<dt class="subheader">Total Users</dt>
<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">
<dt class="subheader">Average CSAT Score</dt>
<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">
<dt class="subheader">Average Response Time</dt>
<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">
<dt class="subheader">Total Tickets</dt>
<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">
<dt class="subheader">Resolution Rate</dt>
<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">
<dt class="subheader">Total Cohorts</dt>
<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">
<dt class="subheader">Avg. Handling Time</dt>
<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">
<dt class="subheader">First Contact Resolution</dt>
<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">
<dt class="subheader">Retention Rate</dt>
<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>
</div>
</div>
</div>
</div>
</DefaultLayout>
Reference in New Issue View Git Blame Copy Permalink