mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
23 lines
984 B
Plaintext
23 lines
984 B
Plaintext
---
|
|
import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
|
|
import type { PaymentProvider } from '@shared/lib/tokens'
|
|
import Payment from '@ui/Payment.astro'
|
|
import allPayments from '@data/payments.json'
|
|
|
|
// 12 most globally recognized payment providers.
|
|
const popularLogos = ['visa', 'mastercard', 'paypal', 'applepay', 'google-pay', 'stripe', 'americanexpress', 'klarna', 'amazon-pay', 'samsung-pay', 'unionpay', 'alipay']
|
|
const payments = popularLogos.map((logo) => allPayments.find((item) => item.logo === logo)).filter((item) => item !== undefined)
|
|
---
|
|
|
|
<ScreenshotLayout title="Payments list" columns={2} cssPlugins={['payments']} zoom={1.5}>
|
|
<div class="d-grid gap-4" style="grid-template-columns: repeat(4, auto); justify-content: center; align-items: center;">
|
|
{
|
|
payments.map((item) => (
|
|
<span title={item.name}>
|
|
<Payment payment={item.logo as PaymentProvider} dark={true} />
|
|
</span>
|
|
))
|
|
}
|
|
</div>
|
|
</ScreenshotLayout>
|