Button

Button.tsx

import { children, JSX, mergeProps } from 'solid-js'

export interface ButtonProps {
  bgColor?: string
  hoverColor?: string
  activeColor?: string
  children: JSX.Element
}

export default function Button(props: ButtonProps) {
  const childProp = children(() => props.children)
  const mergedProps = mergeProps({ bgColor: '#4d84c4', hoverColor: '#2f5694', activeColor: '#2f5694' }, props)

  const buttonstyle = {
    button: {
      padding: '10px 15px',
      'font-size': '18px',
      'text-align': 'center',
      outline: 'none',
      color: '#fff',
      'background-color': mergedProps.bgColor,
      border: 'none',
      'border-radius': '10px',
      'box-shadow': '0 3px #999',
    },
  }

  return (
    <button
      style={{
        padding: '10px 15px',
        'font-size': '18px',
        'text-align': 'center',
        outline: 'none',
        color: '#fff',
        'background-color': mergedProps.bgColor,
        border: 'none',
        'border-radius': '10px',
        'box-shadow': '0 3px #999',
        '& button:hover': {
          'background-color': mergedProps.hoverColor,
        },

        '& button:focus-visible': {
          'box-shadow': '0 0 3px 3px',
        },

        '&:active': {
          'background-color': mergedProps.activeColor,
          'box-shadow': '0 5px #666',
          transform: 'translateY(3px)',
        },
      }}
    >
      {childProp}
    </button>
  )
}