34 lines
875 B
Plaintext
34 lines
875 B
Plaintext
---
|
|
type Variant = 'solid' | 'outline' | 'soft' | 'mono';
|
|
|
|
interface Props {
|
|
variant?: Variant;
|
|
href?: string;
|
|
class?: string;
|
|
ariaLabel?: string;
|
|
}
|
|
|
|
const { variant = 'solid', href, class: className = '', ariaLabel } = Astro.props;
|
|
const base =
|
|
'inline-flex items-center gap-1.5 rounded-full font-label-md tracking-wider uppercase text-[11px] px-2.5 py-1 transition-colors duration-200';
|
|
const variants: Record<Variant, string> = {
|
|
solid: 'bg-primary text-white',
|
|
outline: 'border border-primary/40 text-primary',
|
|
soft: 'bg-primary/10 text-primary',
|
|
mono: 'bg-on-surface text-background font-mono tracking-tighter',
|
|
};
|
|
const cls = [base, variants[variant], className].filter(Boolean).join(' ');
|
|
---
|
|
|
|
{
|
|
href ? (
|
|
<a href={href} class={cls} aria-label={ariaLabel}>
|
|
<slot />
|
|
</a>
|
|
) : (
|
|
<span class={cls}>
|
|
<slot />
|
|
</span>
|
|
)
|
|
}
|