tabler/preview/pages/payment-providers.astro

---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Payment from '@ui/Payment.astro'
import Card from '@ui/Card.astro'
import CardHeader from '@ui/CardHeader.astro'
import CardBody from '@ui/CardBody.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">
      <Card>
        <CardHeader>
          <div class="card-title">Light version</div>
        </CardHeader>
        <CardBody>
          <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>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardHeader>
          <div class="card-title">Dark version</div>
        </CardHeader>
        <CardBody>
          <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>
        </CardBody>
      </Card>
    </div>
  </div>
</DefaultLayout>