Building a design system?

import tw from "tailwind-styled-components";

const Button = tw.div`
  flex 
  w-48
  items-center
  rounded-full
  bg-white/10
  px-4
  py-2
  font-semibold
  text-white
  no-underline
  transition
  hover:bg-white/20
`;

export default Button;

import tw from "tailwind-styled-components";

const Button = tw.div`
  flex 
  w-48
  items-center
  rounded-full
  bg-white/10
  px-4
  py-2
  font-semibold
  text-white
  no-underline
  transition
  hover:bg-white/20
`;

export default Button;

import React from "react";
import { FaGoogle } from "react-icons/fa";
import { signIn } from "next-auth/react";
import Button from "src/designsys/Button";

type ButtonProps = {
  prompt?: string;
  provider?: "google" | "gmail";
};

const GoogleLoginButton: React.FC<ButtonProps> = ({
  prompt = "Login with Google",
  provider = "google",
}) => {
  return (
    <Button onClick={() => signIn(provider)}>
      <span>
        <FaGoogle />
      </span>
      &nbsp;&nbsp;
      {prompt}
    </Button>
  );
};

export default GoogleLoginButton;

import React from "react";
import { FaGoogle } from "react-icons/fa";
import { signIn } from "next-auth/react";
import Button from "src/designsys/Button";

type ButtonProps = {
  prompt?: string;
  provider?: "google" | "gmail";
};

const GoogleLoginButton: React.FC<ButtonProps> = ({
  prompt = "Login with Google",
  provider = "google",
}) => {
  return (
    <Button onClick={() => signIn(provider)}>
      <span>
        <FaGoogle />
      </span>
      &nbsp;&nbsp;
      {prompt}
    </Button>
  );
};

export default GoogleLoginButton;