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
53
54
55
56
57
58
59
|
---
import type { Icons } from '@components/icons/Icon.astro';
import Icon from '@components/icons/Icon.astro';
import type { HTMLAttributes } from 'astro/types';
const styles = {
// TODO: adjust active / disabled colors
primary: 'bg-blue-500 text-white hover:bg-blue-400 active:bg-blue-600 disabled:bg-blue-800 disabled:text-white-1/4',
secondary: 'bg-blue-20 text-blue-60 border-[1px] border-blue-30 hover:bg-blue-200 active:bg-blue-300 disabled:bg-blue-50 disabled:text-blue-200',
ghost: 'bg-transparent text-blue-500 hover:bg-blue-20 active:bg-blue-30 disabled:bg-transparent disabled:text-blue-200',
};
const sizes = {
sm: 'px-4 py-2 text-sm',
md: 'px-5 py-3 text-md',
lg: 'px-6 py-3 text-lg rounded-2xl',
};
const iconSize = {
sm: 17,
md: 20,
lg: 24,
};
interface Props extends HTMLAttributes<'button'> {
style?: keyof typeof styles
size?: keyof typeof sizes
text?: string
iconLeft?: Icons
iconRight?: Icons
href?: string
}
const {
style = 'primary',
size = 'md',
text = '',
iconLeft = '',
iconRight = '',
...rest
} = Astro.props;
const className = [
'flex flex-row justify-center items-center text-center focus-visible:ring-offset-4 focus-visible:outline-offset-4',
'rounded-xl font-medium',
styles[style],
sizes[size],
'transition-colors',
rest.class,
].join(' ');
const Element = rest.href ? 'a' : 'button' as any;
---
<Element {...rest} class={className}>
{iconLeft && <span class="mr-2"><Icon icon={iconLeft} size={iconSize[size]}></Icon></span>}
{text || <slot/>}
{iconRight && <span class="ml-2"><Icon icon={iconRight} size={iconSize[size]}></Icon></span>}
</Element>
|
