gistfile1.txt

import React, { ReactNode } from 'react';

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: ReactNode;
  color: 'primary' | 'secondary';
  size: 'sm' | 'lg';
}

const commons =
  'inline-flex justify-center items-center w-auto py-0 font-sans font-semibold no-underline tracking-wide text-white cursor-pointer transition duration-300 ease select-none border border-solid rounded focus:outline-none focus:shadow';
const colors = {
  primary: 'border-primary bg-primary hover:bg-primary-dark',
  secondary: 'border-secondary bg-secondary  hover:bg-secondary-dark',
};
const sizes = {
  lg: 'h-10 px-6 text-lg',
  sm: 'h-8 px-3 text-base',
};
const Button = ({ children, color, size, ...buttonProps }: ButtonProps) => {
  return (
    <button {...buttonProps} className={`${commons} ${colors[color]} ${sizes[size]}`}>
      {children}
    </button>
  );
};
export { Button };