Sanity components for Blocks Dropdowns

Button.js

import React from "react";

const sizes = {
  sm: `py-2 px-3 text-xs`,
  default: `py-3 px-4 text-sm`,
  lg: `py-4 px-6 text-base`,
};

const styles = {
  default: `bg-black hover:bg-gold text-white hover:text-black border-2 border-transparent`,
  outlined: `bg-transparent hover:bg-gold text-black hover:text-black border-2 border-black hover:border-gold`,
  outlinedAlt: `bg-transparent hover:bg-gold text-white hover:text-black border-2 border-white hover:border-gold`,
};

const Button = ({
  children,
  type,
  size,
  style,
  className = "",
  href,
  target,
  ariaLabel,
  rel,
}) => {

  return (
    <button
      className={`
      ${sizes[size] || sizes.default}
      ${styles[style] || styles.default}
      ${className}
        transition transform uppercase font-bold leading-normal no-underline rounded-full inline-block my-4 hover:shadow-lg
      `}
    >
      {children}
    </button>
  );
};

export default Button;

index.js

<Button
    type="link"
    style="outlinedAlt"
    href="https://something.com"
    ariaLabel="linkName"
>
    Link Name
</Button>