1
0
mirror of https://github.com/tabler/tabler.git synced 2026-08-07 20:02:23 +04:00
Files
tabler/preview/pages/payment-providers.astro
T
2026-07-28 00:09:02 +02:00

62 lines
1.7 KiB
Plaintext

---
// Port of preview/pages/payment-providers.html (layout: default)
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import Payment from '@shared/components/ui/Payment.astro';
import payments from '@data/payments.json';
const providers = payments as { name: string; logo: string }[];
---
<DefaultLayout title="Payment Providers" pageHeader="Payment Providers" pageMenu="addons.payments">
<div class="row row-cards">
<div class="col-12">
<div class="card">
<div class="card-header">
<div class="card-title">Light version</div>
</div>
<div class="card-body">
<div class="row g-5 row-cols-5">
{providers.map((provider) => (
<div class="col">
<div class="row">
<div class="col-auto"><Payment payment={provider.logo} /></div>
<div class="col">
<strong class="d-block">{provider.name}</strong>
<div class="mt-1">
<code>{provider.logo}</code>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<div class="card-title">Dark version</div>
</div>
<div class="card-body">
<div class="row g-5 row-cols-5">
{providers.map((provider) => (
<div class="col">
<div class="row">
<div class="col-auto"><Payment payment={provider.logo} dark={true} /></div>
<div class="col">
<strong class="d-block">{provider.name}</strong>
<div class="mt-1">
<code>{provider.logo}-dark</code>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</DefaultLayout>