/
githubmirror
/
tabler
Обзор
Документация
Войти
/
githubmirror
/
tabler
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
dev
shared/components/cards/PricingCard.astro
50 строк
1 KB
codecalm
Fix Prettier formatting regression and Astro type-check errors
03 авг 2026, 02:26
03 авг 2026, 02:26
f27c70a
Код
Авторство
О чём код?
--- // 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>