51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
export function Button({
|
|
preset,
|
|
children,
|
|
disabled = false,
|
|
onClick = undefined,
|
|
}: {
|
|
preset: 'small' | 'publish' | 'large' | 'large-alt';
|
|
children: ReactNode;
|
|
disabled?: boolean;
|
|
onClick?: () => void;
|
|
}) {
|
|
let preClass: string;
|
|
switch (preset) {
|
|
case 'small':
|
|
preClass =
|
|
'w-min h-9 px-4 bg-white/10 backdrop-blur-xl rounded-md text-sm font-medium text-white hover:bg-fuchsia-500';
|
|
break;
|
|
case 'publish':
|
|
preClass =
|
|
'w-min h-9 px-4 bg-fuchsia-500 rounded-md text-sm font-medium text-white hover:bg-fuchsia-600';
|
|
break;
|
|
case 'large':
|
|
preClass =
|
|
'h-11 w-full bg-fuchsia-500 rounded-lg font-medium text-white hover:bg-fuchsia-600';
|
|
break;
|
|
case 'large-alt':
|
|
preClass =
|
|
'h-11 w-full bg-white/10 backdrop-blur-xl rounded-lg font-medium text-white hover:bg-white/20';
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
className={twMerge(
|
|
'inline-flex transform items-center justify-center gap-1 leading-none focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50',
|
|
preClass
|
|
)}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|