114 lines
4.1 KiB
Plaintext
114 lines
4.1 KiB
Plaintext
component FeatureCard {
|
|
props {
|
|
icon = ""
|
|
title = "Feature"
|
|
description = ""
|
|
href = ""
|
|
actionLabel = "Learn more"
|
|
actionIcon = ""
|
|
badge = ""
|
|
badgeColor = "primary"
|
|
size = "default"
|
|
color = "primary"
|
|
variant = "default"
|
|
hover = "lift"
|
|
align = "left"
|
|
disabled = false
|
|
class = ""
|
|
}
|
|
|
|
view {
|
|
<article
|
|
data-ui-component="FeatureCard"
|
|
aria-disabled='{disabled}'
|
|
class='group relative flex h-full min-w-0 flex-col overflow-hidden rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] shadow-sm transition duration-200 {class}'
|
|
class:p-4='size === "sm"'
|
|
class:p-6='size === "default" || size === "md"'
|
|
class:p-8='size === "lg"'
|
|
class:bg-[var(--wire-color-primary-soft)]='variant === "soft" && color === "primary"'
|
|
class:bg-[var(--wire-color-success-soft)]='variant === "soft" && color === "success"'
|
|
class:bg-[var(--wire-color-warning-soft)]='variant === "soft" && color === "warning"'
|
|
class:bg-[var(--wire-color-danger-soft)]='variant === "soft" && color === "danger"'
|
|
class:bg-transparent='variant === "ghost"'
|
|
class:border-transparent='variant === "ghost"'
|
|
class:shadow-none='variant === "ghost" || variant === "outline"'
|
|
class:hover:-translate-y-1='hover === "lift" && !disabled'
|
|
class:hover:shadow-xl='(hover === "lift" || hover === "shadow") && !disabled'
|
|
class:hover:border-[var(--wire-color-primary)]='(hover === "lift" || hover === "border") && !disabled'
|
|
class:text-center='align === "center"'
|
|
class:items-center='align === "center"'
|
|
class:text-right='align === "right"'
|
|
class:items-end='align === "right"'
|
|
class:opacity-60='disabled'
|
|
class:pointer-events-none='disabled'
|
|
>
|
|
<div class="flex w-full items-start justify-between gap-4">
|
|
<div
|
|
class="flex size-12 shrink-0 items-center justify-center rounded-2xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)]"
|
|
class:bg-[var(--wire-color-success-soft)]='color === "success"'
|
|
class:text-[var(--wire-color-success)]='color === "success"'
|
|
class:bg-[var(--wire-color-warning-soft)]='color === "warning"'
|
|
class:text-[var(--wire-color-warning-text)]='color === "warning"'
|
|
class:bg-[var(--wire-color-danger-soft)]='color === "danger"'
|
|
class:text-[var(--wire-color-danger)]='color === "danger"'
|
|
class:bg-[var(--wire-color-info-soft)]='color === "info"'
|
|
class:text-[var(--wire-color-info)]='color === "info"'
|
|
class:size-10='size === "sm"'
|
|
class:size-14='size === "lg"'
|
|
>
|
|
<slot name="icon"></slot>
|
|
{#if icon}
|
|
<span class='{icon + " size-6"}' aria-hidden="true"></span>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if badge}
|
|
<Badge
|
|
label='{badge}'
|
|
size="sm"
|
|
color='{badgeColor}'
|
|
variant="soft"
|
|
/>
|
|
{/if}
|
|
</div>
|
|
|
|
<h3 class="mt-5 text-lg font-bold leading-tight text-[var(--wire-color-text)]" class:text-xl='size === "lg"'>
|
|
{title}
|
|
</h3>
|
|
|
|
{#if description}
|
|
<p class="mt-3 flex-1 text-sm leading-6 text-[var(--wire-color-text-muted)]" class:text-base='size === "lg"'>
|
|
{description}
|
|
</p>
|
|
{/if}
|
|
|
|
<slot></slot>
|
|
|
|
<div class="mt-6 flex w-full items-center justify-between gap-3">
|
|
<slot name="footer"></slot>
|
|
|
|
{#if href && actionLabel}
|
|
<TextLink
|
|
label='{actionLabel}'
|
|
href='{href}'
|
|
icon='{actionIcon}'
|
|
iconPosition="start"
|
|
showArrow="true"
|
|
size="sm"
|
|
color='{color}'
|
|
class="ml-auto"
|
|
/>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if href}
|
|
<a
|
|
href='{href}'
|
|
aria-label='{title}'
|
|
class="absolute inset-0 z-10 rounded-2xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--wire-color-focus)]"
|
|
></a>
|
|
{/if}
|
|
</article>
|
|
}
|
|
}
|