55 lines
2.0 KiB
Plaintext
55 lines
2.0 KiB
Plaintext
component ChannelCard {
|
|
props {
|
|
title = ""
|
|
description = ""
|
|
href = ""
|
|
icon = ""
|
|
actionLabel = ""
|
|
class = ""
|
|
}
|
|
|
|
view {
|
|
<article
|
|
class="wire-channel-card group flex h-full min-h-72 flex-col rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-6 text-[var(--wire-color-text)] shadow-[var(--wire-shadow-sm,var(--wire-shadow-1))] transition duration-200 hover:-translate-y-1 hover:border-[var(--wire-color-primary)] hover:shadow-[var(--wire-shadow-md,var(--wire-shadow-1))] sm:p-7 {class}"
|
|
>
|
|
<div class="flex min-h-12 items-start justify-between gap-4">
|
|
{#if icon}
|
|
<span
|
|
class="wire-channel-card__icon grid size-12 shrink-0 place-items-center rounded-xl border border-[var(--wire-color-border)]"
|
|
aria-hidden="true"
|
|
>
|
|
<span class="{icon} block size-5"></span>
|
|
</span>
|
|
{/if}
|
|
|
|
<div class="flex min-w-0 flex-1 justify-end">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
|
|
{#if title}
|
|
<h3 class="mt-5 text-xl font-semibold tracking-[-0.02em] text-[var(--wire-color-text)]">
|
|
{title}
|
|
</h3>
|
|
{/if}
|
|
|
|
{#if description}
|
|
<p class="mt-3 flex-1 text-sm leading-6 text-[var(--wire-color-text-muted,var(--wire-color-muted))]">
|
|
{description}
|
|
</p>
|
|
{/if}
|
|
|
|
{#if href}
|
|
<a
|
|
href="{href}"
|
|
class="mt-6 inline-flex items-center justify-between gap-3 border-t border-[var(--wire-color-border)] pt-5 text-sm font-semibold text-[var(--wire-color-primary)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary)] focus-visible:ring-offset-2"
|
|
aria-label="Explore {title}"
|
|
>
|
|
<span>{actionLabel || "Explore " + title}</span>
|
|
<span class="transition-transform duration-200 group-hover:translate-x-1" aria-hidden="true">→</span>
|
|
</a>
|
|
{/if}
|
|
</article>
|
|
}
|
|
}
|