fp/services/next/app/components/access-denied-screen.tsx

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faCircleXmark, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons"
import Link from "next/link"

export default function AccessDeniedScreen(requiredUserRole: string, featureName: string = 'This feature') {
  return <>
    <div className="card">
      <div className="card-header">
        <p className="card-header-title"><FontAwesomeIcon className="mr-2" icon={faCircleXmark}></FontAwesomeIcon>Access denied</p>
      </div>
      <div className="card-content">
        <p>{featureName} is only available to <span className="tag is-success is-normal">{requiredUserRole}s</span></p>
        <p>To unlock this feature, make a pledge at <Link href="https://patreon.com/CJ_Clippy" target="_blank">
            <span>patreon.com/CJ_Clippy</span>
            <FontAwesomeIcon
              icon={faExternalLinkAlt}
              className="fab fa-external-link-alt ml-2"
            ></FontAwesomeIcon>
          </Link>
        </p>
      </div>
    </div>
  </>
}