mary.my.id
handy online tools for AT Protocol
boat.kelinci.net
atproto
bluesky
atcute
typescript
solidjs
1import { createMemo, type JSX } from 'solid-js';
2
3interface ButtonProps {
4 children?: JSX.Element;
5 disabled?: boolean;
6 variant?: 'primary' | 'secondary' | 'outline';
7 type?: 'button' | 'submit';
8 href?: string;
9 onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
10}
11
12const buttonStyles = ({ variant = 'primary', disabled = false }: ButtonProps): string => {
13 let cn = `flex h-9 select-none items-center rounded px-4 text-sm font-semibold`;
14
15 if (variant === 'primary') {
16 cn += ` bg-purple-800 text-white hover:bg-purple-700 active:bg-purple-700`;
17 } else if (variant === 'secondary') {
18 cn += ` bg-gray-200 text-black hover:bg-gray-300 active:bg-gray-300`;
19 } else if (variant === 'outline') {
20 cn += ` border border-gray-300 text-gray-800 hover:bg-gray-100 active:bg-gray-100`;
21 }
22
23 if (disabled) {
24 cn += ` pointer-events-none opacity-50`;
25 }
26
27 return cn;
28};
29
30const Button = (props: ButtonProps) => {
31 const hasLink = createMemo(() => props.href !== undefined);
32
33 return (() => {
34 if (hasLink()) {
35 return (
36 <a href={!props.disabled ? props.href : undefined} class={buttonStyles(props)}>
37 {props.children}
38 </a>
39 );
40 }
41
42 return (
43 <button
44 type={props.type ?? 'button'}
45 disabled={props.disabled}
46 class={buttonStyles(props)}
47 onClick={props.onClick}
48 >
49 {props.children}
50 </button>
51 );
52 }) as unknown as JSX.Element;
53};
54
55export default Button;