65 lines
2.5 KiB
Plaintext
65 lines
2.5 KiB
Plaintext
component PricingPlanCard {
|
|
props {
|
|
class = ""
|
|
name = "Starter"
|
|
description = ""
|
|
price = "₹0"
|
|
period = "/month"
|
|
featured = false
|
|
badgeLabel = "Most popular"
|
|
ctaLabel = "Choose plan"
|
|
ctaHref = "#"
|
|
}
|
|
|
|
view {
|
|
<article class="relative flex h-full min-w-0 flex-col rounded-3xl border bg-[var(--wire-color-surface)] p-6 text-[var(--wire-color-text)] shadow-[var(--wire-shadow-sm)] transition duration-200 sm:p-7 {class}">
|
|
{#if featured}
|
|
<div class="mb-5">
|
|
<Badge label="{badgeLabel}" variant="brand" />
|
|
</div>
|
|
{/if}
|
|
|
|
<h3 class="text-xl font-semibold tracking-[-0.02em] text-[var(--wire-color-text)]">
|
|
{name}
|
|
</h3>
|
|
|
|
{#if description}
|
|
<p class="mt-2 min-h-14 text-sm leading-6 text-[var(--wire-color-text-muted)]">
|
|
{description}
|
|
</p>
|
|
{/if}
|
|
|
|
<div class="mt-6 flex flex-wrap items-end gap-x-1.5 gap-y-1">
|
|
<span class="text-4xl font-semibold tracking-[-0.04em] text-[var(--wire-color-text)]">
|
|
{price}
|
|
</span>
|
|
{#if period}
|
|
<span class="pb-1 text-sm text-[var(--wire-color-text-muted)]">
|
|
{period}
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="mt-6 flex-1 border-t border-[var(--wire-color-border)] pt-6">
|
|
<slot />
|
|
</div>
|
|
|
|
{#if featured}
|
|
<a
|
|
href="{ctaHref}"
|
|
class="mt-7 inline-flex min-h-11 w-full items-center justify-center rounded-xl bg-[var(--wire-color-primary)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-primary-contrast)] no-underline shadow-[var(--wire-shadow-sm)] transition duration-200 hover:bg-[var(--wire-color-primary-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary)] focus-visible:ring-offset-2"
|
|
>
|
|
{ctaLabel}
|
|
</a>
|
|
{:else}
|
|
<a
|
|
href="{ctaHref}"
|
|
class="mt-7 inline-flex min-h-11 w-full items-center justify-center rounded-xl border border-[var(--wire-color-border-strong)] bg-[var(--wire-color-surface)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-text)] no-underline transition duration-200 hover:border-[var(--wire-color-primary)] hover:bg-[var(--wire-color-surface-2)] hover:text-[var(--wire-color-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary)] focus-visible:ring-offset-2"
|
|
>
|
|
{ctaLabel}
|
|
</a>
|
|
{/if}
|
|
</article>
|
|
}
|
|
}
|