tonality/packages/app-web/src/components/molecules/forms/ActionButton/index.tsx

import styled from 'styled-components';
import {FC, MouseEventHandler, ReactChild} from 'react';

const Base = styled('div')({
	height: '3rem',
	borderRadius: '0.25rem',
	overflow: 'hidden',
	position: 'relative',
	'::before': {
		content: "''",
		borderWidth: 1,
		borderStyle: 'solid',
		borderColor: 'inherit',
		position: 'absolute',
		top: 0,
		left: 0,
		width: '100%',
		height: '100%',
		borderRadius: 'inherit',
		boxSizing: 'border-box',
		opacity: 0.5,
	},
})

const ClickArea = styled('button')({
	display: 'grid',
	placeContent: 'center',
	width: '100%',
	height: '100%',
	margin: 0,
	padding: '0 1rem',
	boxSizing: 'border-box',
	font: 'inherit',
	border: 0,
	backgroundColor: 'transparent',
	color: 'inherit',
	outline: 0,
	textTransform: 'uppercase',
	fontWeight: 'bolder',
	position: 'relative',
	lineHeight: 0,
	cursor: 'pointer',
	':disabled': {
		cursor: 'not-allowed',
	}
})

const VARIANTS = {
	default: {
		backgroundColor: 'var(--color-bg, white)',
		borderColor: 'var(--color-fg, black)',
		color: 'var(--color-fg, black)',
	},
	primary: {
		backgroundColor: 'var(--color-fg, black)',
		borderColor: 'var(--color-fg, black)',
		color: 'var(--color-bg, white)',
	},
}

type Props = {
	children?: ReactChild,
	className?: string,
	type?: 'button' | 'reset' | 'submit',
	block?: boolean,
	variant?: keyof typeof VARIANTS,
	onClick?: MouseEventHandler<HTMLButtonElement>,
	disabled?: boolean,
}

const ActionButton: FC<Props> = ({
	children,
	className,
	type = 'button',
	block,
	variant = 'default',
	...etcProps
}) => {
	return (
		<Base
			className={className}
			style={{
				...VARIANTS[variant],
				display: block ? 'block' : 'inline-block',
				width: block ? '100%' : undefined,
			}}
		>
			<ClickArea
				{...etcProps}
				type={type}
			>
				{children}
			</ClickArea>
		</Base>
	)
}

export default ActionButton