17 lines · 614 B
import { Link } from "@tanstack/react-router";
import type { ReactNode } from "react";
import { buttonClass } from "~/ui/Button";
import { Heading } from "~/ui/Heading";

export function NotFound({ children }: { children?: ReactNode }) {
  return (
    <div className="mx-auto flex max-w-xl flex-col items-start gap-4 px-6 py-20">
      <div className="label-caps text-accent-400">404</div>
      <Heading size="xl">{children ?? "This page doesn't exist, or you don't have access to it."}</Heading>
      <Link to="/" className={buttonClass("secondary")}>
        Back to dashboard
      </Link>
    </div>
  );
}