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

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

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

const ClickArea = styled('label')({
	display: 'block',
	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',
	borderRadius: 'inherit',
})

const Input = styled('input')({
	position: 'absolute',
	left: -999999,
})

const ButtonWrapper = styled('span')({
	display: 'grid',
	placeContent: 'center',
	borderRadius: 'inherit',
	position: 'absolute',
	top: 0,
	left: 0,
	width: '100%',
	height: '100%',
	lineHeight: 0,
	cursor: 'pointer',
	[`${Input}:disabled + &`]: {
		cursor: 'not-allowed',
	},
	[`${Input}:checked + &`]: {
		backgroundColor: 'Highlight !important',
	},
})

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?: 'checkbox' | 'radio',
	block?: boolean,
	variant?: keyof typeof VARIANTS,
	name?: string,
	value?: string,
	defaultChecked?: boolean,
	onChange?: ChangeEventHandler<HTMLInputElement>,
	disabled?: boolean,
}

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

export default ToggleButton