mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 13:21:29 +04:00
codecalm
f27c70ad38
`Render Modal as real markup` (#2742) reformatted ~140 files back to tabs/semicolons, breaking the Prettier config added by the Astro quality gates (#2749). Re-run prettier --write to restore it, and fix the type errors it had been masking: HTMLElement casts and `this` typing in ChangePasswordModalContent/ConfirmDeleteModalContent scripts, plain-JS syntax in the inline-injected progress.astro script, narrowed prop unions in Button/Check/Spinner, nullable icon svg casts in Icons/Rating, and a duplicate firstLetters/invalid `placeholder` attribute in Select.astro. Also fix shared/vitest.config.mts's stale `astro/lib/**/*.test.ts` include glob left over from the shared source restructure, which made `pnpm test` report zero test files.
51 lines
1.4 KiB
Plaintext
51 lines
1.4 KiB
Plaintext
---
|
|
// Feature names are a fixed list; the `features` string is split per-character into a 1/0 availability mask.
|
|
import Icon from '@ui/Icon.astro'
|
|
|
|
interface Props {
|
|
price?: string
|
|
users?: string | number
|
|
category?: string
|
|
features?: string
|
|
/** featured-color — ribbon + button color (e.g. "green") */
|
|
featuredColor?: string
|
|
}
|
|
|
|
const { price = '79', users = 10, category = 'Enterprise', features = '1000', featuredColor } = Astro.props
|
|
|
|
const featureNames = ['Sharing Tools', 'Design Tools', 'Private Messages', 'Twitter API']
|
|
const availableFeatures = features.split('')
|
|
---
|
|
|
|
<div class="card card-md">
|
|
{
|
|
featuredColor && (
|
|
<div class={`ribbon ribbon-top ribbon-bookmark bg-${featuredColor}`}>
|
|
<Icon name="star" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
<div class="card-body text-center">
|
|
<div class="text-uppercase text-secondary fw-medium">{category}</div>
|
|
|
|
<div class="display-5 fw-bold my-3">${price}</div>
|
|
|
|
<ul class="list-unstyled lh-lg">
|
|
<li><strong>{users}</strong> Users</li>
|
|
{
|
|
featureNames.map((feature, i) => (
|
|
<li>
|
|
{availableFeatures[i] === '1' ? <Icon name="check" class="me-1 text-success" /> : <Icon name="x" class="me-1 text-danger" />}
|
|
{feature}
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
|
|
<div class="text-center mt-4">
|
|
<a href="#" class={`btn${featuredColor ? ` btn-${featuredColor}` : ''} w-100`}>Choose plan</a>
|
|
</div>
|
|
</div>
|
|
</div>
|