mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
Drop playground pages from the preview build (#3024)
This commit is contained in:
Paweł Kuna authored and 
GitHub committed
1 parent
9efa76a334
commit
2f37632136
6 files changed
+30
-586
No files matched your search
@@ -3,7 +3,7 @@ import { defineConfig } from 'astro/config'
|
||||
import mdx from '@astrojs/mdx'
|
||||
import { satteri } from '@astrojs/markdown-satteri'
|
||||
import beautify from 'js-beautify'
|
||||
import { globSync, statSync } from 'node:fs'
|
||||
import { globSync, rmSync, statSync } from 'node:fs'
|
||||
import { availableParallelism } from 'node:os'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { Worker } from 'node:worker_threads'
|
||||
@@ -71,6 +71,27 @@ function prettifyHtml() {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Playground pages (playground.astro, playground-*.astro) are local scratch
|
||||
* pages — gitignored, and dropped from the build so a local `astro build` or a
|
||||
* stray tracked copy never ships them. Runs before prettify-html (integration
|
||||
* order), so the pages are not formatted just to be deleted.
|
||||
* @returns {import('astro').AstroIntegration}
|
||||
*/
|
||||
function dropPlaygrounds() {
|
||||
return {
|
||||
name: 'drop-playgrounds',
|
||||
hooks: {
|
||||
'astro:build:done': ({ dir, logger }) => {
|
||||
const outDir = fileURLToPath(dir)
|
||||
const files = globSync([`${outDir}playground.html`, `${outDir}playground-*.html`])
|
||||
for (const file of files) rmSync(file)
|
||||
if (files.length > 0) logger.info(`Dropped ${files.length} playground page(s) from the build`)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
// pages live at the package root (./pages) — all components/lib/data are
|
||||
@@ -142,6 +163,7 @@ export default defineConfig({
|
||||
reloadDirs: [path('./public/preview')],
|
||||
}),
|
||||
mdx(),
|
||||
dropPlaygrounds(),
|
||||
prettifyHtml(),
|
||||
],
|
||||
markdown: {
|
||||
|
||||
@@ -1,325 +0,0 @@
|
||||
---
|
||||
import ButtonGroup from '@ui/ButtonGroup.astro'
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
|
||||
import Icon from '@ui/Icon.astro'
|
||||
import Button from '@ui/Button.astro'
|
||||
import Badge from '@ui/Badge.astro'
|
||||
import Avatar from '@ui/Avatar.astro'
|
||||
import AvatarList from '@ui/AvatarList.astro'
|
||||
import PeopleAvatarList from '@components/demo/PeopleAvatarList.astro'
|
||||
import Pagination from '@ui/Pagination.astro'
|
||||
import Card from '@ui/Card.astro'
|
||||
import CardBody from '@ui/CardBody.astro'
|
||||
---
|
||||
|
||||
<DefaultLayout title="Categories playground" pageHeader={false}>
|
||||
<!-- Header -->
|
||||
<div class="row align-items-center gy-3 mb-5">
|
||||
<div class="col">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb mb-1">
|
||||
<li class="breadcrumb-item">
|
||||
<a class="text-secondary" href="#">
|
||||
<Icon name="arrow-left" class="icon-inline me-1" />
|
||||
Back
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h1 class="fs-3 mb-0">Categories</h1>
|
||||
</div>
|
||||
<div class="col-12 col-lg-auto order-last order-lg-0">
|
||||
<div class="row align-items-center gx-3">
|
||||
<div class="col col-lg-auto">
|
||||
<div class="input-group input-group-flat rounded-pill">
|
||||
<input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="playground-categories-search" />
|
||||
<span class="input-group-text" id="playground-categories-search">
|
||||
<Icon name="search" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="dropdown">
|
||||
<Button element="button" type="button" icon="filter" iconOnly text="Open filters" dropdown />
|
||||
<div class="dropdown-menu demo-dropdown-menu-wide p-6">
|
||||
<h3 class="mb-4">Filter</h3>
|
||||
<form id="playgroundCategoriesFilterForm">
|
||||
<div class="row align-items-center mb-3">
|
||||
<div class="col-3">
|
||||
<label class="form-label mb-0" for="playgroundFilterUser">User</label>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<select class="form-select" id="playgroundFilterUser" aria-label="User">
|
||||
<option value="Emily Thompson" selected>Emily Thompson</option>
|
||||
<option value="Michael Johnson">Michael Johnson</option>
|
||||
<option value="Robert Garcia">Robert Garcia</option>
|
||||
<option value="Jessica Miller">Jessica Miller</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center mb-3">
|
||||
<div class="col-3">
|
||||
<label class="form-label mb-0" for="playgroundFilterCompany">Company</label>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<select class="form-select" id="playgroundFilterCompany" aria-label="Company">
|
||||
<option value="TechPinnacle Solutions" selected>TechPinnacle Solutions</option>
|
||||
<option value="Quantum Dynamics">Quantum Dynamics</option>
|
||||
<option value="Pinnacle Technologies">Pinnacle Technologies</option>
|
||||
<option value="Apex Innovations">Apex Innovations</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-3">
|
||||
<label class="form-label mb-0" for="playgroundFilterLocation">Location</label>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<select class="form-select" id="playgroundFilterLocation" aria-label="Location">
|
||||
<option value="San Francisco, CA" selected>San Francisco, CA</option>
|
||||
<option value="Austin, TX">Austin, TX</option>
|
||||
<option value="Miami, FL">Miami, FL</option>
|
||||
<option value="Seattle, WA">Seattle, WA</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto ms-n2">
|
||||
<div class="dropdown">
|
||||
<Button element="button" type="button" icon="sort-ascending-letters" iconOnly text="Open sort options" dropdown />
|
||||
<div class="dropdown-menu demo-dropdown-menu-wide p-6">
|
||||
<h3 class="mb-4">Sort</h3>
|
||||
<form id="playgroundCategoriesSortForm">
|
||||
<div class="row gx-3">
|
||||
<div class="col">
|
||||
<select class="form-select" id="playgroundSortField" aria-label="Sort by">
|
||||
<option value="user" selected>User</option>
|
||||
<option value="company">Company</option>
|
||||
<option value="phone">Phone</option>
|
||||
<option value="location">Location</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<ButtonGroup aria-label="Sort direction">
|
||||
<input type="radio" class="btn-check" name="playgroundSortDir" id="playgroundSortAsc" autocomplete="off" checked />
|
||||
<label class="btn btn-light px-0 btn-icon" for="playgroundSortAsc" aria-label="Ascending"><Icon name="arrow-up" /></label>
|
||||
<input type="radio" class="btn-check" name="playgroundSortDir" id="playgroundSortDesc" autocomplete="off" />
|
||||
<label class="btn btn-light px-0 btn-icon" for="playgroundSortDesc" aria-label="Descending"><Icon name="arrow-down" /></label>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button class="btn btn-primary" type="button">New category</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-7" />
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-12 col-lg-6">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<div class="row align-items-center mb-3">
|
||||
<div class="col">
|
||||
<Badge text="Featured" color="primary" />
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<Icon name="confetti" class="icon-lg text-primary opacity-50" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="fs-5 mb-1 text-truncate"><a class="text-body" href="./empty.html">Announcements</a></h3>
|
||||
<p class="text-secondary text-truncate">For company updates, system changes, or important notices that everyone should see.</p>
|
||||
<p class="small text-secondary mb-0">Last post 2 days ago</p>
|
||||
<hr />
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<AvatarList stacked={true}>
|
||||
<Avatar src="static/avatars/001f.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Emily Thompson" />
|
||||
<Avatar src="static/avatars/002m.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Michael Johnson" />
|
||||
<Avatar src="static/avatars/003m.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Robert Garcia" />
|
||||
</AvatarList>
|
||||
<div class="text-end">
|
||||
<Badge text="20 posts" class="bg-light text-body" />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-6">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<div class="row align-items-center mb-3">
|
||||
<div class="col">
|
||||
<Badge text="Featured" color="success" />
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<Icon name="slideshow" class="icon-lg text-success opacity-50" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="fs-5 mb-1 text-truncate"><a class="text-body" href="./empty.html">Marketing campaigns</a></h3>
|
||||
<p class="text-secondary text-truncate">Posts related to new campaigns, marketing strategies, and promotions.</p>
|
||||
<p class="small text-secondary mb-0">Last post 1 day ago</p>
|
||||
<hr />
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<PeopleAvatarList stacked={true} size="xs" offset={3} limit={3} />
|
||||
<div class="text-end">
|
||||
<Badge text="62 posts" class="bg-light text-body" />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-lg-4">
|
||||
<Card class="position-relative overflow-hidden">
|
||||
<Icon name="chart-pie" class="icon-lg text-danger opacity-25 position-absolute top-0 end-0 m-3" />
|
||||
<CardBody>
|
||||
<small class="text-secondary d-block mb-3">12 followers</small>
|
||||
<h3 class="fs-6 mb-1 text-truncate"><a class="text-body" href="./empty.html">Reports & analytics</a></h3>
|
||||
<p class="text-secondary text-truncate">Data-driven insights and performance reports across all departments.</p>
|
||||
<p class="small text-secondary mb-0">Last post 5 days ago</p>
|
||||
<hr />
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<AvatarList stacked={true}>
|
||||
<Avatar src="static/avatars/001f.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Emily Thompson" />
|
||||
<Avatar src="static/avatars/003m.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Robert Garcia" />
|
||||
</AvatarList>
|
||||
<div class="text-end">
|
||||
<Badge text="28 posts" class="bg-light text-body" />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-lg-4">
|
||||
<Card class="position-relative overflow-hidden">
|
||||
<Icon name="id-badge" class="icon-lg text-warning opacity-25 position-absolute top-0 end-0 m-3" />
|
||||
<CardBody>
|
||||
<small class="text-secondary d-block mb-3">16 followers</small>
|
||||
<h3 class="fs-6 mb-1 text-truncate"><a class="text-body" href="./empty.html">Events & webinars</a></h3>
|
||||
<p class="text-secondary text-truncate">Upcoming events, webinar recordings, and community meetups.</p>
|
||||
<p class="small text-secondary mb-0">Last post 3 days ago</p>
|
||||
<hr />
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<AvatarList stacked={true}>
|
||||
<Avatar src="static/avatars/005f.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Olivia Davis" />
|
||||
<Avatar src="static/avatars/002m.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Michael Johnson" />
|
||||
</AvatarList>
|
||||
<div class="text-end">
|
||||
<Badge text="34 posts" class="bg-light text-body" />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-lg-4">
|
||||
<Card class="position-relative overflow-hidden">
|
||||
<Icon name="user" class="icon-lg text-warning opacity-25 position-absolute top-0 end-0 m-3" />
|
||||
<CardBody>
|
||||
<small class="text-secondary d-block mb-3">9 followers</small>
|
||||
<h3 class="fs-6 mb-1 text-truncate"><a class="text-body" href="./empty.html">Client success stories</a></h3>
|
||||
<p class="text-secondary text-truncate">Case studies and testimonials from our most satisfied customers.</p>
|
||||
<p class="small text-secondary mb-0">Last post 1 week ago</p>
|
||||
<hr />
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<AvatarList stacked={true}>
|
||||
<Avatar src="static/avatars/006m.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="James Wilson" />
|
||||
<Avatar src="static/avatars/004f.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Jessica Miller" />
|
||||
</AvatarList>
|
||||
<div class="text-end">
|
||||
<Badge text="64 posts" class="bg-light text-body" />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-lg-4">
|
||||
<Card class="position-relative overflow-hidden">
|
||||
<Icon name="message" class="icon-lg text-primary opacity-25 position-absolute top-0 end-0 m-3" />
|
||||
<CardBody>
|
||||
<small class="text-secondary d-block mb-3">10 followers</small>
|
||||
<h3 class="fs-6 mb-1 text-truncate"><a class="text-body" href="./empty.html">Team highlights</a></h3>
|
||||
<p class="text-secondary text-truncate">Spotlights, shoutouts, and stories from people across the team.</p>
|
||||
<p class="small text-secondary mb-0">Last post 4 days ago</p>
|
||||
<hr />
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<AvatarList stacked={true}>
|
||||
<Avatar src="static/avatars/002m.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Michael Johnson" />
|
||||
<Avatar src="static/avatars/001f.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Emily Thompson" />
|
||||
</AvatarList>
|
||||
<div class="text-end">
|
||||
<Badge text="42 posts" class="bg-light text-body" />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-lg-4">
|
||||
<Card class="position-relative overflow-hidden">
|
||||
<Icon name="building-bank" class="icon-lg text-danger opacity-25 position-absolute top-0 end-0 m-3" />
|
||||
<CardBody>
|
||||
<small class="text-secondary d-block mb-3">26 followers</small>
|
||||
<h3 class="fs-6 mb-1 text-truncate"><a class="text-body" href="./empty.html">Training & resources</a></h3>
|
||||
<p class="text-secondary text-truncate">Access to learning materials, tutorials, or resources for users and staff.</p>
|
||||
<p class="small text-secondary mb-0">Last post 6 days ago</p>
|
||||
<hr />
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<AvatarList stacked={true}>
|
||||
<Avatar src="static/avatars/003m.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Robert Garcia" />
|
||||
<Avatar src="static/avatars/005f.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Olivia Davis" />
|
||||
</AvatarList>
|
||||
<div class="text-end">
|
||||
<Badge text="38 posts" class="bg-light text-body" />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-lg-4">
|
||||
<Card class="position-relative overflow-hidden">
|
||||
<Icon name="brand-apple" class="icon-lg text-primary opacity-25 position-absolute top-0 end-0 m-3" />
|
||||
<CardBody>
|
||||
<small class="text-secondary d-block mb-3">6 followers</small>
|
||||
<h3 class="fs-6 mb-1 text-truncate"><a class="text-body" href="./empty.html">Industry news</a></h3>
|
||||
<p class="text-secondary text-truncate">Trends, news, and commentary from around the industry landscape.</p>
|
||||
<p class="small text-secondary mb-0">Last post 2 weeks ago</p>
|
||||
<hr />
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<AvatarList stacked={true}>
|
||||
<Avatar src="static/avatars/006m.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="James Wilson" />
|
||||
<Avatar src="static/avatars/004f.jpg" size="xs" data-bs-toggle="tooltip" data-bs-title="Jessica Miller" />
|
||||
</AvatarList>
|
||||
<div class="text-end">
|
||||
<Badge text="59 posts" class="bg-light text-body" />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row align-items-center mt-7">
|
||||
<div class="col">
|
||||
<p class="text-secondary mb-0">1 – 8 (8 total)</p>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<nav aria-label="Page navigation">
|
||||
<Pagination count={3} offset={3} activeItem={1} class="mb-0" />
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,19 +0,0 @@
|
||||
---
|
||||
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'
|
||||
---
|
||||
|
||||
<DefaultLayout title="Layout playground" pretitle="Playground" navbarPosition="vertical">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Sandbox</CardTitle>
|
||||
<p class="text-secondary mb-0">Edit this page to try layout options, components, and styles.</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,239 +0,0 @@
|
||||
---
|
||||
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'
|
||||
import CardTitle from '@ui/CardTitle.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">Button</a>
|
||||
<a href="" class="btn demo-btn-border-translucent">Button</a>
|
||||
<a href="" class="btn demo-btn-border-dark">Button</a>
|
||||
<a href="" class="btn demo-btn-border-dark-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" value="2020-06-20" />
|
||||
</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>
|
||||
<CardTitle class="mb-4">Cohort statistics</CardTitle>
|
||||
<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
Block a user