77525a56cd
* feat: implement UI for logging out * feat: use old style dialogs for logout confirmation * feat: implement manage sessions * feat: implement session logout success dialog * feat: use snjs alert for revoking sessions confirmation * fix: make OtherSessionsLogout easier to read
36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import { FunctionComponent } from 'preact';
|
|
|
|
const baseClass = `rounded px-4 py-1.75 font-bold text-sm fit-content`;
|
|
|
|
type ButtonType = 'normal' | 'primary' | 'danger';
|
|
|
|
const buttonClasses: { [type in ButtonType]: string } = {
|
|
normal: `${baseClass} bg-default color-text border-solid border-gray-300 border-1 focus:bg-contrast hover:bg-contrast`,
|
|
primary: `${baseClass} no-border bg-info color-info-contrast hover:brightness-130 focus:brightness-130`,
|
|
danger: `${baseClass} bg-default color-danger border-solid border-gray-300 border-1 focus:bg-contrast hover:bg-contrast`,
|
|
};
|
|
|
|
export const Button: FunctionComponent<{
|
|
className?: string;
|
|
type: ButtonType;
|
|
label: string;
|
|
onClick: () => void;
|
|
disabled?: boolean;
|
|
}> = ({ type, label, className = '', onClick, disabled = false }) => {
|
|
const buttonClass = buttonClasses[type];
|
|
const cursorClass = disabled ? 'cursor-default' : 'cursor-pointer';
|
|
|
|
return (
|
|
<button
|
|
className={`${buttonClass} ${cursorClass} ${className}`}
|
|
onClick={(e) => {
|
|
onClick();
|
|
e.preventDefault();
|
|
}}
|
|
disabled={disabled}
|
|
>
|
|
{label}
|
|
</button>
|
|
);
|
|
};
|