"use client"; import Link from "next/link"; import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"; import { motion, useInView, useReducedMotion } from "motion/react"; import { useRef, type ReactNode } from "react"; import { buttonVariants } from "@/components/ui/button"; import { SectionShell } from "@/components/layout-contract"; import { motionStagger, motionViewport } from "@/lib/motion-tokens"; import { cn } from "@/lib/utils"; import { notFoundCode, notFoundHome, type NotFoundLink } from "./not-found-data"; const spring = { type: "spring" as const, duration: 0.3, bounce: 0 }; export function useNotFoundItemVariants() { const reduceMotion = useReducedMotion(); return reduceMotion ? { hidden: { opacity: 1 }, visible: { opacity: 1 } } : { hidden: { opacity: 0, filter: "blur(4px)", y: 8 }, visible: { opacity: 1, filter: "blur(0px)", y: 0, transition: spring }, }; } export function NotFoundStagger({ children, className, }: { children: ReactNode; className?: string; }) { const ref = useRef(null); const inView = useInView(ref, motionViewport); return ( {children} ); } export function NotFoundStaggerItem({ children, className, }: { children: ReactNode; className?: string; }) { const itemVariants = useNotFoundItemVariants(); return ( {children} ); } export function NotFoundCode({ className, size = "lg", }: { className?: string; size?: "lg" | "xl"; }) { return (

{notFoundCode}

); } export function NotFoundHomeLink({ className }: { className?: string }) { return ( {notFoundHome.label} ); } export function NotFoundOutlineLink({ href, children, className, }: { href: string; children: ReactNode; className?: string; }) { return ( {children} ); } export function NotFoundLinkCard({ link }: { link: NotFoundLink }) { return ( {link.label} {link.description ? ( {link.description} ) : null} ); } export function NotFoundLinkRow({ link }: { link: NotFoundLink }) { return (

{link.label}

{link.description ? (

{link.description}

) : null}

); } export function NotFoundSectionShell({ children, className, }: { children: ReactNode; className?: string; }) { return ( {children} ); }