initial commit
This commit is contained in:
@@ -0,0 +1,33 @@
|
||||
---
|
||||
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 = {
|
||||
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user