36 lines
1017 B
Plaintext
36 lines
1017 B
Plaintext
component PricingComparisonTable {
|
|
props {
|
|
caption = "Plan comparison"
|
|
plans = []
|
|
features = []
|
|
featuredPlan = ""
|
|
class = ""
|
|
}
|
|
|
|
view {
|
|
<div class="wire-table-wrap rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] shadow-[var(--wire-shadow-sm)] {class}" tabindex="0" role="region" aria-label="{caption}">
|
|
<table class="wire-table wire-comparison-table min-w-[56rem]">
|
|
<caption class="wire-visually-hidden">{caption}</caption>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Feature</th>
|
|
{#each plans as plan}
|
|
<th scope="col">{plan.name}</th>
|
|
{/each}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each features as feature}
|
|
<tr>
|
|
<th scope="row">{feature.label}</th>
|
|
{#each feature.values as value}
|
|
<td>{value}</td>
|
|
{/each}
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
}
|
|
}
|