mirror of
https://github.com/tabler/tabler.git
synced 2026-08-07 20:02:23 +04:00
Migrate preview and docs packages from Eleventy to Astro (#2694)
Co-authored-by: Bartek <xbartoszdobija@gmail.com>
This commit is contained in:
Paweł Kuna
GitHub
@@ -0,0 +1,129 @@
|
||||
---
|
||||
// Port of preview/pages/widgets.html (layout: default).
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import StatCard from '@shared/components/cards/StatCard.astro';
|
||||
import ProjectProgress from '@shared/components/cards/ProjectProgress.astro';
|
||||
import UserCard from '@shared/components/cards/UserCard.astro';
|
||||
import UserCardBig from '@shared/components/cards/UserCardBig.astro';
|
||||
import UserCardBg from '@shared/components/cards/UserCardBg.astro';
|
||||
import Subscribe from '@shared/components/cards/Subscribe.astro';
|
||||
import SmallStats from '@shared/components/cards/SmallStats.astro';
|
||||
import Code from '@shared/components/cards/Code.astro';
|
||||
import ProjectSummary from '@shared/components/cards/ProjectSummary.astro';
|
||||
import ProjectKanban from '@shared/components/cards/ProjectKanban.astro';
|
||||
import UserInfo from '@shared/components/cards/UserInfo.astro';
|
||||
import Configuration from '@shared/components/cards/Configuration.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout title="Widgets" pageHeader="Widgets" pageMenu="extra.widgets" pageLibs={['apexcharts']}>
|
||||
<div class="row row-cards">
|
||||
<div class="col-12 col-md-6 col-xxl-3 mb-4 mb-xxl-0">
|
||||
<StatCard title="Earned" value="$2,847" icon="credit-card" />
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xxl-3 mb-4 mb-xxl-0">
|
||||
<StatCard title="Hours logged" value="42.7 hrs" icon="clock" />
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xxl-3 mb-4 mb-md-0">
|
||||
<StatCard title="Avg. time" value="3:28 hrs" icon="slideshow" />
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xxl-3">
|
||||
<StatCard title="Weekly growth" value="18.4%" icon="discount" />
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<ProjectProgress />
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<ProjectProgress projectId={2} progress={76} daysAgo={7} />
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-xl-3"><UserCard personId={5} /></div>
|
||||
<div class="col-md-6 col-xl-3"><UserCard personId={6} /></div>
|
||||
<div class="col-md-6 col-xl-3"><UserCard personId={7} right /></div>
|
||||
<div class="col-md-6 col-xl-3"><UserCard personId={8} right /></div>
|
||||
|
||||
<div class="col-md-6 col-xl-3"><UserCardBig personId={15} /></div>
|
||||
<div class="col-md-6 col-xl-3"><UserCardBig personId={16} /></div>
|
||||
<div class="col-md-6 col-xl-3"><UserCardBig personId={17} /></div>
|
||||
<div class="col-md-6 col-xl-3"><UserCardBig personId={18} /></div>
|
||||
|
||||
<div class="col-md-6 col-xl-3"><UserCardBg personId={25} /></div>
|
||||
<div class="col-md-6 col-xl-3"><UserCardBg personId={26} /></div>
|
||||
<div class="col-md-6 col-xl-3"><UserCardBg personId={27} blurred /></div>
|
||||
<div class="col-md-6 col-xl-3"><UserCardBg personId={28} blurred /></div>
|
||||
|
||||
|
||||
<div class="col-md-6">
|
||||
<Subscribe personId={0} />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<Subscribe personId={2} />
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<SmallStats id="currency" icon="currency-dollar" color="primary" title="132 Sales" description="12 waiting payments" />
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<SmallStats id="shopping-cart" icon="shopping-cart" color="green" title="78 Orders" description="32 shipped" />
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<SmallStats id="user" icon="user" color="red" title="1352 Members" description="163 registered today" />
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<SmallStats id="message" icon="message" color="yellow" title="132 Comments" description="16 waitings" />
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<SmallStats id="sales" chartPosition="left" chartType="donut" chartData="56" color="primary" title="132 Sales" description="12 waiting payments" />
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<SmallStats id="orders" chartPosition="left" chartType="donut" chartData="56" color="green" title="78 Orders" description="32 shipped" />
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<SmallStats id="members" chartPosition="left" chartType="donut" chartData="56" color="red" title="1352 Members" description="163 registered today" />
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<SmallStats id="comments" chartPosition="left" chartType="donut" chartData="56" color="yellow" title="132 Comments" description="16 waitings" />
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<SmallStats id="sales" icon="arrow-up" color="green" lt title="$5,256.99" description="Revenue last 30 days" descriptionValue="+4%" />
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<SmallStats id="orders" icon="arrow-down" color="red" lt title="342" description="Sales last 30 days" descriptionValue="-4.3%" descriptionValueColor="red" />
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<SmallStats id="members" icon="arrow-up" color="green" lt title="132" description="Customers last 30 days" descriptionValue="+6.8%" />
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<SmallStats id="comments" icon="arrow-down" color="red" lt title="78" description="Members registered today" descriptionValue="-2%" descriptionValueColor="red" />
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12"><SmallStats chartType="line" chartData="20,0,40,30,40,30,80,60" /></div>
|
||||
<div class="col-12"><SmallStats chartType="bar" chartData="20,40,30,10,40,60,80,70" color="red" icon="heart" /></div>
|
||||
<div class="col-12"><SmallStats chartType="bar" chartData="20,40,20,-10,-30,10,40,60,80,70" color="green" icon="brand-github" /></div>
|
||||
<div class="col-12"><SmallStats chartType="donut" chartData="12" personId={10} /></div>
|
||||
<div class="col-12"><SmallStats chartType="donut" chartData="12" personId={11} /></div>
|
||||
<div class="col-12"><SmallStats chartType="donut" chartData="56" personId={1} /></div>
|
||||
<div class="col-12"><SmallStats color="green" personId={4} /></div>
|
||||
<div class="col-12"><SmallStats smallIcon="trending-down" color="red" personId={3} /></div>
|
||||
<div class="col-12"><Code /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12"><ProjectSummary stageColor="red" /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12"><ProjectKanban title="Tabler UI" badge="v1.0" value={30} percentageColor="red" limit={4} offset={0} due="72 days" /></div>
|
||||
<div class="col-12"><ProjectKanban title="Tabler React" value={80} offset={20} /></div>
|
||||
<div class="col-12"><UserInfo /></div>
|
||||
<div class="col-12"><Configuration /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
Reference in New Issue
Block a user