|
- 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
|