8-bit 404 Dwarf

1import Link from "next/link";
2import Image from "next/image";
3 
4import { cn } from "@/lib/utils";
5 
6import { Button } from "@/components/ui/8bit/button";
7 
8import "@/components/ui/8bit/styles/retro.css";
9 
10interface NotFound2Props {
11  className?: string;
12  cta?: string;
13  description?: string;
14  href?: string;
15  imageSrc?: string;
16  title?: string;
17}
18 
19export default function NotFound2({
20  title = "The Dwarf says NO!",
21  description = "This tunnel has collapsed. The path you seek no longer exists.",
22  cta = "Retreat to Safety",
23  href = "/",
24  imageSrc = "/images/8bit-dwarf.png",
25  className,
26}: NotFound2Props) {
27  return (
28    <div
29      className={cn(
30        "retro grid w-full place-content-center gap-5 bg-background px-4 py-16 text-center md:py-24",
31        className,
32      )}
33    >
34      <div className="retro font-bold text-6xl tracking-tight sm:text-8xl">
35        404
36      </div>
37 
38      {imageSrc && (
39        <div className="flex justify-center -mt-10">
40          <Image
41            alt="404"
42            className="pixelated"
43            height={200}
44            src={imageSrc}
45            width={200}
46          />
47        </div>
48      )}
49 
50      <h1 className="retro font-bold text-2xl tracking-tight sm:text-4xl">
51        {title}
52      </h1>
53 
54      <p className="retro text-muted-foreground text-[9px]">{description}</p>
55 
56      <div className="flex justify-center">
57        <Button asChild>
58          <Link href={href}>{cta}</Link>
59        </Button>
60      </div>
61    </div>
62  );
63}