Presupuestador_web/client/src/app/ErrorPage.tsx

import { Button } from "@/ui";
import { useLocation, useNavigate } from "react-router-dom";
// import Button

/*const isDev = process.env.REACT_APP_NODE_ENV === "development";
const hostname = `${
  isDev ? process.env.REACT_APP_DEV_API_URL : process.env.REACT_APP_PROD_API_URL
}`;*/

type ErrorPageProps = {
  error?: string;
};
export const ErrorPage = (props: ErrorPageProps) => {
  const navigate = useNavigate();
  const location = useLocation();

  const navMsg = location.state?.error;
  const msg = navMsg ? (
    <p className='text-lg'>{navMsg}</p>
  ) : props.error ? (
    <p className='text-lg'>{props.error}</p>
  ) : (
    <p className='text-lg'>
      The targeted page <b>"{location.pathname}"</b> was not found, please confirm the spelling and
      try again.
    </p>
  );

  return (
    <div className='flex min-h-[100dvh] flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8'>
      <div className='max-w-md mx-auto text-center'>
        <div className='w-12 h-12 mx-auto text-primary' />
        <h1 className='mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl'>
          Oops, page not found!
        </h1>
        <p className='mt-4 text-muted-foreground'>
          The page you're looking for doesn't exist or has been moved.
        </p>
        <div className='mt-6'>
          <Button
            className='inline-flex items-center px-4 py-2 text-sm font-medium transition-colors rounded-md shadow-sm bg-primary text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2'
            prefetch={false}
          >
            Go to Homepage
          </Button>
        </div>
      </div>
    </div>
  );

  return (
    <section id='Error' className='flex flex-col items-center w-full h-full'>
      {msg}
      <span className='flex flex-row items-center justify-center my-10 space-x-8 '>
        <Button id='backButton' onClick={() => navigate(-1)}>
          Return to Previous Page
        </Button>
        <Button id='homeButton' onClick={() => navigate("/")}>
          Return to Home Page
        </Button>
        <Button
          id='logout'
          onClick={() => {
            //const endpoint = `${hostname}/logout`;
            //window.open(endpoint, "_blank");
          }}
        >
          Reset Authentication
        </Button>
      </span>
    </section>
  );
};