8-bit 404 Undead

1import Link from "next/link";
2import Image from "next/image";
3 
4import { cn } from "@/lib/utils";
5 
6import { Badge } from "@/components/ui/8bit/badge";
7import { Button } from "@/components/ui/8bit/button";
8 
9import "@/components/ui/8bit/styles/retro.css";
10 
11interface NotFound3Props {
12  badge?: string;
13  className?: string;
14  cta?: string;
15  ctaSecondary?: string;
16  description?: string;
17  href?: string;
18  hrefSecondary?: string;
19  imageSrc?: string;
20  title?: string;
21}
22 
23export default function NotFound3({
24  title = "This page should have stayed buried",
25  description = "Looks like this route crawled out of the crypt and disappeared again.",
26  badge = "CURSED ROUTE",
27  cta = "Return Home",
28  ctaSecondary = "Browse Blocks",
29  href = "/",
30  hrefSecondary = "/docs/blocks",
31  imageSrc = "/images/8bit-undead.png",
32  className,
33}: NotFound3Props) {
34  return (
35    <div
36      className={cn(
37        "retro grid w-full place-content-center gap-5 bg-background px-4 py-16 text-center md:py-24",
38        className,
39      )}
40    >
41      {badge && (
42        <div className="flex justify-center">
43          <Badge variant="secondary">{badge}</Badge>
44        </div>
45      )}
46 
47      <div className="retro font-bold text-6xl tracking-tight sm:text-8xl">
48        404
49      </div>
50 
51      {imageSrc && (
52        <div className="flex justify-center -mt-10">
53          <Image
54            alt="404"
55            className="pixelated"
56            height={200}
57            src={imageSrc}
58            width={200}
59          />
60        </div>
61      )}
62 
63      <h1 className="retro font-bold text-xl tracking-tight sm:text-2xl">
64        {title}
65      </h1>
66 
67      <p className="retro text-muted-foreground text-[9px]">{description}</p>
68 
69      <div className="flex flex-wrap justify-center gap-4">
70        <Button asChild>
71          <Link href={href}>{cta}</Link>
72        </Button>
73        {ctaSecondary && hrefSecondary && (
74          <Button asChild variant="outline">
75            <Link href={hrefSecondary}>{ctaSecondary}</Link>
76          </Button>
77        )}
78      </div>
79    </div>
80  );
81}