Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 60 61 62 63 64 65 66 67 | 13x 13x 13x 23x 23x 23x 23x 23x 13x | import { MouseEventHandler } from 'react'
export type ActionButtonSize = 'xs' | 'sm' | 'md' | 'lg'
export type ActionButtonStyle = 'default' | 'primary'
export interface ActionButtonProps {
disabled?: boolean
fullWidth?: boolean
id?: string
onClick?: MouseEventHandler<HTMLButtonElement>
size?: ActionButtonSize
style?: ActionButtonStyle
text: string
type?: 'button' | 'submit' | 'reset'
}
const sizes = {
xs: 'px-1.5 py-px rounded-sm text-sm',
sm: 'px-2.5 py-1.5 rounded-sm text-sm',
md: 'px-3.5 py-2.5 rounded text-base',
lg: 'px-4 py-2.5 rounded-md text-lg',
}
const styles = {
default:
'border-gray-dark bg-gray-normal text-blue-light hover:bg-gray-dark hover:border-l-gray-deep hover:border-t-grasy-deep focus:bg-gray-dark focus:text-blue-light border-r-gray-500 border-b-gray-500',
primary:
'border-blue-dark bg-blue-dark text-basic-white hover:bg-blue-normal active:bg-blue-active focus:bg-blue-normal focus:text-basic-white',
}
const ActionButton = ({
disabled,
fullWidth,
id,
onClick,
size,
style,
text,
type,
}: ActionButtonProps) => {
const baseClasses =
'align-middle border font-display inline-flex items-center justify-center shadow-sm disabled:cursor-not-allowed disabled:opacity-70 disabled:pointer-events-none disabled:shadow-none focus:ring-2 focus:ring-black focus:ring-offset-2'
const fullWidthClasses = fullWidth ? 'w-full' : undefined
const sizeClasses = sizes[size ?? 'md']
const styleClasses = styles[style ?? 'default']
return (
<button
id={id}
className={`${baseClasses} ${fullWidthClasses} ${sizeClasses} ${styleClasses}`}
onClick={onClick}
type={type}
disabled={disabled}
>
{text}
</button>
)
}
ActionButton.defaultProps = {
type: 'button',
style: 'default',
}
export default ActionButton
|