1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
---
import { Icon } from 'astro-icon/components';
import { twMerge } from 'tailwind-merge';
import type { CallToAction as Props } from '~/types';
const {
variant = 'secondary',
target,
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, 'group relative overflow-hidden rounded-md')} {...rest}>
<span class="flex items-center justify-center">
<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" />}
</span>
<Icon
name="tabler:arrow-right"
class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-200 ease-in-out"
/>
</button>
) : (
<a
class={twMerge(variants[variant] || '', className, 'group relative overflow-hidden rounded-md')}
{...(target ? { target: target, rel: 'noopener noreferrer' } : {})}
{...rest}
>
<span class="flex items-center justify-center">
<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" />}
</span>
<Icon
name="tabler:arrow-right"
class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-200 ease-in-out"
/>
</a>
)
}
|
