import { Link, useRouter } from "@tanstack/react-router";
import type { ReactNode } from "react";
import { ERROR_COPY } from "~/lib/error-copy";
import { Button, buttonClass } from "~/ui/Button";
import { ErrorScreen } from "~/ui/ErrorScreen";
const NOT_FOUND = 404;
export function NotFound({ children }: { children?: ReactNode }) {
const router = useRouter();
const copy = ERROR_COPY["not-found"];
return (
<ErrorScreen
status={NOT_FOUND}
title={copy.title}
command={copy.command}
description={children ?? copy.description}
actions={
<>
<Link to="/" className={buttonClass("primary")}>
Take me home
</Link>
<Button onClick={() => router.history.back()}>Go back</Button>
<Link to="/explore" className={buttonClass("ghost")}>
Explore repositories
</Link>
</>
}
/>
);
}