wasp/web/docs/auth/Pills.jsx

import React from "react";
import './Pills.css';
import Link from '@docusaurus/Link';

export function Pill({ children, linkToPage, style = {} }) {
  return <Link to={linkToPage}
    style={{
      padding: "0.1rem 0.5rem",
      borderRadius: "0.375rem",
      color: "var(--auth-pills-color)",
      textDecoration: "none",
      display: "inline-block",
      ...style,
    }}
  >{children}</Link>;
}

/*
:root {
  --auth-pills-email: #e0f2fe;
  --auth-pills-github: #f1f5f9;
  --auth-pills-google: #ecfccb;
  --auth-pills-username-and-pass: #fce7f3;
}
*/
export function EmailPill() {
  return <Pill style={{
    backgroundColor: "var(--auth-pills-email)",
  }} linkToPage="/docs/auth/email">Email</Pill>;
}

export function UsernameAndPasswordPill() {
  return <Pill style={{
    backgroundColor: "var(--auth-pills-username-and-pass)",
  }} linkToPage="/docs/auth/username-and-pass">Username & Password</Pill>;
}

export function GithubPill() {
  return <Pill style={{
    backgroundColor: "var(--auth-pills-github)",
  }} linkToPage="/docs/auth/social-auth/github">Github</Pill>;
}

export function GooglePill() {
  return <Pill style={{
    backgroundColor: "var(--auth-pills-google)",
  }} linkToPage="/docs/auth/social-auth/google">Google</Pill>;
}