404 / Not Found Terminal

1"use client";
2// beui.dev/components/blocks/not-found
3 
4import { TextReveal } from "@/components/motion/text-reveal";
5import {
6  NOT_FOUND_DEFAULTS,
7  NotFoundActions,
8  NotFoundStage,
9  type NotFoundProps,
10} from "./shared";
11 
12const TYPE_SPRING = { stiffness: 320, damping: 30, mass: 0.6 };
13 
14export function NotFoundTerminal({
15  className,
16  code = NOT_FOUND_DEFAULTS.code,
17  title = NOT_FOUND_DEFAULTS.title,
18  description = NOT_FOUND_DEFAULTS.description,
19  homeHref,
20  homeLabel,
21  browseHref,
22  browseLabel,
23}: NotFoundProps) {
24  return (
25    <NotFoundStage className={className}>
26      <div className="w-full max-w-md overflow-hidden rounded-xl border border-border bg-neutral-950 text-left shadow-lg">
27        <div className="flex items-center gap-1.5 border-b border-white/10 px-4 py-3">
28          <span className="h-3 w-3 rounded-full bg-[#ff5f57]" />
29          <span className="h-3 w-3 rounded-full bg-[#febc2e]" />
30          <span className="h-3 w-3 rounded-full bg-[#28c840]" />
31          <span className="ml-2 text-xs text-white/40">~/beui</span>
32        </div>
33        <div className="space-y-1.5 p-4 font-mono text-sm leading-relaxed">
34          <TextReveal
35            as="p"
36            split="char"
37            stagger={0.018}
38            blur={6}
39            yOffset={0}
40            spring={TYPE_SPRING}
41            className="text-white/80"
42            text="$ cd /page"
43          />
44          <TextReveal
45            as="p"
46            split="char"
47            stagger={0.012}
48            delay={0.45}
49            blur={6}
50            yOffset={0}
51            spring={TYPE_SPRING}
52            className="text-[#ff5f57]"
53            text="cd: no such file or directory: /page"
54          />
55          <p className="flex items-center text-white/80">
56            <TextReveal
57              as="span"
58              split="char"
59              stagger={0.018}
60              delay={1.1}
61              blur={6}
62              yOffset={0}
63              spring={TYPE_SPRING}
64              text={`$ status ${code}`}
65            />
66            <span className="ml-1 inline-block h-[1.1em] w-[0.55ch] translate-y-[0.12em] bg-white/80 motion-safe:animate-pulse" />
67          </p>
68        </div>
69      </div>
70 
71      <div className="flex flex-col items-center gap-2">
72        <p className="text-lg font-semibold text-foreground">{title}</p>
73        <p className="max-w-sm text-sm text-muted-foreground">{description}</p>
74      </div>
75 
76      <NotFoundActions
77        homeHref={homeHref}
78// … truncated