mirror of
https://github.com/tabler/tabler.git
synced 2026-08-07 20:02:23 +04:00
Paweł Kuna
93 lines
3.5 KiB
Plaintext
93 lines
3.5 KiB
Plaintext
---
|
|
// Port of preview/pages/card-gradients.html (layout: default)
|
|
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
|
import Welcome from '@shared/components/cards/Welcome.astro';
|
|
import DeleteConfirm from '@shared/components/cards/DeleteConfirm.astro';
|
|
import SuccessMessage from '@shared/components/cards/SuccessMessage.astro';
|
|
import PricingPlan from '@shared/components/cards/PricingPlan.astro';
|
|
import StatGradient from '@shared/components/cards/StatGradient.astro';
|
|
import HappyBirthday from '@shared/components/cards/HappyBirthday.astro';
|
|
import YouWin from '@shared/components/cards/YouWin.astro';
|
|
import Weather from '@shared/components/cards/Weather.astro';
|
|
import ProfileContact from '@shared/components/cards/ProfileContact.astro';
|
|
import SmallStats from '@shared/components/cards/SmallStats.astro';
|
|
import people from '@data/people.json';
|
|
---
|
|
|
|
<DefaultLayout title="Card Gradients" pageHeader="Card Gradients" pageMenu="base.cards.gradients" pageLibs={['apexcharts']}>
|
|
<div class="row row-cards">
|
|
<div class="col-md-6">
|
|
<div class="row row-cards">
|
|
<div class="col-12">
|
|
<Welcome />
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div class="row row-cards">
|
|
<div class="col-12">
|
|
<DeleteConfirm />
|
|
</div>
|
|
<div class="col-12">
|
|
<SuccessMessage />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="row row-cards">
|
|
<div class="col-12">
|
|
<PricingPlan />
|
|
</div>
|
|
<div class="col-12">
|
|
<StatGradient title="Earned" value="$2,847" icon="credit-card" color="success" progress={75} />
|
|
</div>
|
|
<div class="col-12">
|
|
<StatGradient title="Pending Orders" value="47" icon="clock" color="yellow" progress={38} />
|
|
</div>
|
|
<div class="col-12">
|
|
<StatGradient title="Cancelled Orders" value="12" icon="shopping-cart-x" color="red" progress={8} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-3">
|
|
<div class="row row-cards">
|
|
<div class="col-12">
|
|
<HappyBirthday />
|
|
</div>
|
|
<div class="col-12">
|
|
<YouWin />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-3">
|
|
<div class="row row-cards">
|
|
<div class="col-12">
|
|
<Weather city="Warsaw, PL" temperature={3} color="rain" icon="cloud-rain" description="Cloudy morning" />
|
|
</div>
|
|
<div class="col-12">
|
|
<Weather city="Oslo, NO" temperature="-5" color="snow" icon="cloud" description="Snowy day" />
|
|
</div>
|
|
<div class="col-12">
|
|
<Weather city="Dubai, AE" temperature="32" color="sun" icon="sun" description="Sunny day" />
|
|
</div>
|
|
<div class="col-12">
|
|
<ProfileContact person={people[6]} />
|
|
</div>
|
|
<div class="col-12">
|
|
<SmallStats chartType="line" chartData="11,16,13,20,17,24,19,23,16,20,13,17,11,19" color="primary" id="chart1" class="card-gradient card-gradient-end card-gradient-primary" />
|
|
</div>
|
|
<div class="col-12">
|
|
<SmallStats id="sales" icon="arrow-up" color="green" title="$5,256.99" description="Revenue last 30 days" descriptionValue="+4%" class="card-gradient card-gradient-end card-gradient-green" />
|
|
</div>
|
|
<div class="col-12">
|
|
<SmallStats id="orders" icon="arrow-down" color="red" title="342" description="Sales last 30 days" descriptionValue="-4.3%" descriptionValueColor="red" class="card-gradient card-gradient-end card-gradient-red" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DefaultLayout>
|