43 lines
1.1 KiB
Plaintext
43 lines
1.1 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon/components';
|
|
import { twMerge } from 'tailwind-merge';
|
|
import type { CallToAction as Props } from '~/types';
|
|
|
|
const {
|
|
variant = 'secondary',
|
|
target,
|
|
link,
|
|
text = Astro.slots.render('default'),
|
|
icon = '',
|
|
class: className = '',
|
|
type,
|
|
...rest
|
|
} = Astro.props;
|
|
|
|
const variants = {
|
|
primary: 'btn-primary',
|
|
secondary: 'btn-secondary',
|
|
tertiary: 'btn btn-tertiary',
|
|
link: 'cursor-pointer hover:text-primary',
|
|
};
|
|
---
|
|
|
|
{
|
|
type === 'button' || type === 'submit' || type === 'reset' ? (
|
|
<button type={type} class={twMerge(variants[variant] || '', className)} {...rest}>
|
|
<Fragment set:html={text} />
|
|
{icon && <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5 inline-block" />}
|
|
</button>
|
|
) : (
|
|
<a
|
|
class={twMerge(variants[variant] || '', className)}
|
|
{...(target ? { target: target, rel: 'noopener noreferrer' } : {})}
|
|
{...(link ? { href: link} : {})}
|
|
{...rest}
|
|
>
|
|
<Fragment set:html={text} />
|
|
{icon && <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5 inline-block" />}
|
|
</a>
|
|
)
|
|
}
|