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

Migrate preview and docs packages from Eleventy to Astro (#2694)

Browse Source 
Co-authored-by: Bartek <xbartoszdobija@gmail.com>
This commit is contained in:
Paweł Kuna
2026-07-28 00:09:02 +02:00
committed by GitHub
parent 9820d110f6
commit d8956a06d6
1150 changed files with 52147 additions and 32804 deletions
Download Patch File Download Diff File Expand all files Collapse all files
preview/pages/pay.astro
+141
View File
@@ -0,0 +1,141 @@
---
// Port of preview/pages/pay.html (layout: pay).
// page-libs [tabler-payments, imask]: `tabler-payments` is not a key in
// core/libs.json, so it resolves to nothing (only imask emits a <script>) —
// matches the Eleventy reference.
import PayLayout from '@shared/layouts/PayLayout.astro';
import Avatar from '@shared/components/ui/Avatar.astro';
import Payment from '@shared/components/ui/Payment.astro';
import Icon from '@shared/components/Icon.astro';
---
<PayLayout title="Pay" pageLibs={['tabler-payments', 'imask']}>
<div class="bg-dark bg-cover" style="background-image: url(./static/bg-cover.jpg)">
<div class="bg-dark bg-opacity-75 pt-5 bg-blur">
<div class="container container-tight bg-overlay">
<img src="./static/bg-cover.jpg" alt="" class="img-fluid rounded-lg rounded-top" />
</div>
</div>
</div>
<div class="container container-tight">
<div class="card rounded-top-0 border-top-0">
<div class="card-body pt-0">
<div class="mb-3 text-center">
<Avatar personId={1} size="xl" class="avatar-cover rounded-circle mb-3" />
<div class="mb-4">
<h2 class="h2">Front-End Learning</h2>
<div class="text-secondary">
Learn to build web apps with HTML & CSS. Get started quickly with included templates.
</div>
</div>
</div>
<nav class="nav nav-segmented w-100 mb-4" role="tablist">
<button
href="#tab-card"
class="nav-link active"
data-bs-toggle="tab"
role="tab"
aria-controls="tab-card"
aria-selected="true"
>
<Icon name="credit-card" />
<span>Pay With Card</span>
</button>
<button
href="#tab-paypal"
class="nav-link"
data-bs-toggle="tab"
role="tab"
aria-controls="tab-paypal"
aria-selected="false"
>
<Icon name="brand-paypal" />
<span>Pay With PayPal</span>
</button>
</nav>
<div class="tab-content">
<div class="tab-pane active show" id="tab-card" role="tabpanel">
<form>
<div class="space-y">
<div>
<label class="form-label" for="card-number">Card Number</label>
<div class="input-group input-group-flat">
<span class="input-group-text">
<Payment payment="visa" size="xs" />
</span>
<input
type="text"
class="form-control"
placeholder="0000 0000 0000 0000"
autocomplete="off"
id="card-number-addon"
/>
</div>
</div>
<div class="row g-3">
<div class="col-sm-6">
<label class="form-label" for="card-expiry">Expiry Date</label>
<input
type="text"
class="form-control"
id="card-expiry"
placeholder="MM/YY"
inputmode="numeric"
aria-required="true"
maxlength="5"
/>
</div>
<div class="col-sm-6">
<label class="form-label" for="card-cvc">CVC</label>
<input
type="text"
class="form-control"
id="card-cvc"
placeholder="CVC"
inputmode="numeric"
aria-required="true"
maxlength="3"
/>
</div>
</div>
<div>
<label class="form-label" for="card-name">Name on Card</label>
<input type="text" class="form-control" id="card-name" placeholder="Full name" aria-required="true" />
</div>
<div>
<label class="form-label" for="card-email">Email</label>
<input type="email" class="form-control" id="card-email" placeholder="you@example.com" aria-required="true" />
</div>
<div>
<button type="button" class="btn btn-primary w-100"> Pay $253 </button>
<div class="text-secondary text-center small mt-3">
You'll be charged $253, including $48 for VAT in Poland
</div>
</div>
</div>
</form>
</div>
<div class="tab-pane" id="tab-paypal" role="tabpanel">
<button type="button" class="btn btn-primary w-100">
<Icon name="brand-paypal" />
<span class="ms-2">Pay with PayPal - $253</span>
</button>
<div class="text-secondary text-center small mt-3">
You'll be charged $253, including $48 for VAT in Poland
</div>
</div>
</div>
</div>
</div>
</div>
</PayLayout>