plane/apps/app/components/core/not-authorized-view.tsx

import React from "react";
// next
import Link from "next/link";
import Image from "next/image";
import { useRouter } from "next/router";
// layouts
import DefaultLayout from "layouts/default-layout";
// hooks
import useUser from "hooks/use-user";
// img
import ProjectSettingImg from "public/project-setting.svg";

type TNotAuthorizedViewProps = {
  actionButton?: React.ReactNode;
};

export const NotAuthorizedView: React.FC<TNotAuthorizedViewProps> = (props) => {
  const { actionButton } = props;

  const { user } = useUser();
  const { asPath: currentPath } = useRouter();

  return (
    <DefaultLayout
      meta={{
        title: "Plane - Not Authorized",
        description: "You are not authorized to view this page",
      }}
    >
      <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 text-center">
        <div className="h-44 w-72">
          <Image src={ProjectSettingImg} height="176" width="288" alt="ProjectSettingImg" />
        </div>
        <h1 className="text-xl font-medium text-gray-900">
          Oops! You are not authorized to view this page
        </h1>

        <div className="w-full text-base text-gray-500 max-w-md ">
          {user ? (
            <p className="">
              You have signed in as {user.email}.{" "}
              <Link href={`/signin?next=${currentPath}`}>
                <a className="text-gray-900 font-medium">Sign in</a>
              </Link>{" "}
              with different account that has access to this page.
            </p>
          ) : (
            <p className="">
              You need to{" "}
              <Link href={`/signin?next=${currentPath}`}>
                <a className="text-gray-900 font-medium">Sign in</a>
              </Link>{" "}
              with an account that has access to this page.
            </p>
          )}
        </div>

        {actionButton}
      </div>
    </DefaultLayout>
  );
};