Something went wrong. Try again.
https://clembs.com
Something went wrong. Try again.
1.7 kB · 84 lines
Astro
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485---import type { HTMLAttributes } from 'astro/types';
type CommonProps = { id?: string; variant?: 'primary' | 'secondary';};
type Props = | (HTMLAttributes<'a'> & CommonProps & { href: string; }) | (HTMLAttributes<'button'> & CommonProps);
const { variant = 'primary', ...restProps } = Astro.props;---
{ 'href' in restProps ? ( <a class:list={['clickable', restProps.class]} data-variant={variant} {...restProps}> <slot /> </a> ) : ( <button class:list={['clickable', restProps.class]} data-variant={variant} {...restProps}> <slot /> </button> )}
<style lang="scss"> @use '../styles/mixins.scss' as *;
a, button { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 99px; user-select: none; cursor: pointer; appearance: none;
text-decoration: none; text-align: center; text-wrap: balance;
&[data-variant='primary'] { --hue: 0.75; background-color: var(--color-500); color: white; border: 1px solid var(--color-500);
@include focus-hover { background-color: var(--color-600); border: 1px solid var(--color-600); } }
&[data-variant='secondary'] { background-color: var(--color-40); color: var(--color-850); border: 1px solid var(--color-300);
@include focus-hover { background-color: var(--color-100); } }
&:has(svg) { padding-left: 0.75rem;
:global(svg) { height: 1.5rem; width: 1.5rem; }
&:has(:only-child) { padding-right: 0.75rem; } } }</style>