src/components/ui/Button.astro


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

---
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)} {...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' } : {})}
      {...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>
  )
}