404 / Not Found Magnetic

1"use client";
2// beui.dev/components/blocks/not-found
3 
4import { Magnetic } from "@/components/motion/magnetic";
5import { cn } from "@/lib/utils";
6import {
7  NOT_FOUND_DEFAULTS,
8  NotFoundActions,
9  NotFoundStage,
10  type NotFoundProps,
11} from "./shared";
12 
13export function NotFoundMagnetic({
14  className,
15  code = NOT_FOUND_DEFAULTS.code,
16  title = NOT_FOUND_DEFAULTS.title,
17  description = NOT_FOUND_DEFAULTS.description,
18  homeHref,
19  homeLabel,
20  browseHref,
21  browseLabel,
22}: NotFoundProps) {
23  const chars = code.split("");
24 
25  return (
26    <NotFoundStage className={className}>
27      <h1
28        aria-label={code}
29        className="flex select-none items-center justify-center font-bold leading-none tracking-tighter text-foreground [font-size:clamp(5rem,18vw,12rem)]"
30      >
31        {chars.map((ch, i) => (
32          <Magnetic
33            // biome-ignore lint/suspicious/noArrayIndexKey: fixed positional glyphs
34            key={i}
35            strength={0.6}
36            className={cn(i > 0 && "-ml-2")}
37          >
38            <span aria-hidden className="inline-block px-1 tabular-nums">
39              {ch}
40            </span>
41          </Magnetic>
42        ))}
43      </h1>
44 
45      <div className="flex flex-col items-center gap-2">
46        <p className="text-lg font-semibold text-foreground">{title}</p>
47        <p className="max-w-sm text-sm text-muted-foreground">{description}</p>
48      </div>
49 
50      <NotFoundActions
51        homeHref={homeHref}
52        homeLabel={homeLabel}
53        browseHref={browseHref}
54        browseLabel={browseLabel}
55      />
56    </NotFoundStage>
57  );
58}