83 lines
2.0 KiB
TypeScript
83 lines
2.0 KiB
TypeScript
import { JSXInternal } from 'preact/src/jsx';
|
|
import { ComponentChildren, FunctionComponent, Ref } from 'preact';
|
|
import { forwardRef } from 'preact/compat';
|
|
|
|
const baseClass = `rounded px-4 py-1.75 font-bold text-sm fit-content`;
|
|
|
|
type ButtonVariant = 'normal' | 'primary';
|
|
|
|
const getClassName = (
|
|
variant: ButtonVariant,
|
|
danger: boolean,
|
|
disabled: boolean
|
|
) => {
|
|
const borders =
|
|
variant === 'normal' ? 'border-solid border-main border-1' : 'no-border';
|
|
const cursor = disabled ? 'cursor-not-allowed' : 'cursor-pointer';
|
|
|
|
let colors =
|
|
variant === 'normal'
|
|
? 'bg-default color-text'
|
|
: 'bg-info color-info-contrast';
|
|
|
|
let focusHoverStates =
|
|
variant === 'normal'
|
|
? 'focus:bg-contrast hover:bg-contrast'
|
|
: 'hover:brightness-130 focus:brightness-130';
|
|
|
|
if (danger) {
|
|
colors =
|
|
variant === 'normal'
|
|
? 'bg-default color-danger'
|
|
: 'bg-danger color-info-contrast';
|
|
}
|
|
|
|
if (disabled) {
|
|
colors =
|
|
variant === 'normal'
|
|
? 'bg-default color-grey-2'
|
|
: 'bg-grey-2 color-info-contrast';
|
|
focusHoverStates =
|
|
variant === 'normal'
|
|
? 'focus:bg-default hover:bg-default'
|
|
: 'focus:brightness-default hover:brightness-default';
|
|
}
|
|
|
|
return `${baseClass} ${colors} ${borders} ${focusHoverStates} ${cursor}`;
|
|
};
|
|
|
|
type ButtonProps = JSXInternal.HTMLAttributes<HTMLButtonElement> & {
|
|
children?: ComponentChildren;
|
|
className?: string;
|
|
variant?: ButtonVariant;
|
|
dangerStyle?: boolean;
|
|
label?: string;
|
|
};
|
|
|
|
export const Button: FunctionComponent<ButtonProps> = forwardRef(
|
|
(
|
|
{
|
|
variant = 'normal',
|
|
label,
|
|
className = '',
|
|
dangerStyle: danger = false,
|
|
disabled = false,
|
|
children,
|
|
...props
|
|
}: ButtonProps,
|
|
ref: Ref<HTMLButtonElement>
|
|
) => {
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={`${getClassName(variant, danger, disabled)} ${className}`}
|
|
disabled={disabled}
|
|
ref={ref}
|
|
{...props}
|
|
>
|
|
{label ?? children}
|
|
</button>
|
|
);
|
|
}
|
|
);
|