4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T10e0,"use client"; import * as React from "react"; import { useReducedMotion } from "motion/react"; import { cn } from "@/lib/utils"; import { LiquidButton, elementGradient, useElementSurface, type ElementColors, } from "@/registry/clover-ui/liquid-button"; export interface Block404Props extends Omit, "title"> { title?: string; description?: React.ReactNode; actionLabel?: string; href?: string; onAction?: () => void; } const LAVA_TEXT: ElementColors = ["#ff5a4a", "#e8261a", "#a80e06"]; function ElementText({ text, still, className, }: { text: string; still: boolean; className?: string; }) { const wrapRef = React.useRef(null); const canvasRef = React.useRef(null); const tones = LAVA_TEXT; const { ready } = useElementSurface(canvasRef, "lava", tones, still); const [masked, setMasked] = React.useState(false); React.useEffect(() => { const wrap = wrapRef.current; const canvas = canvasRef.current; if (!wrap || !canvas || !ready) return; const paintMask = () => { const { width, height } = wrap.getBoundingClientRect(); if (!width || !height) return; const dpr = Math.min(window.devicePixelRatio || 1, 2); const mask = document.createElement("canvas"); mask.width = Math.round(width * dpr); mask.height = Math.round(height * dpr); const ctx = mask.getContext("2d"); if (!ctx) return; const style = getComputedStyle(wrap); ctx.scale(dpr, dpr); ctx.font = style.font; if ("letterSpacing" in ctx) ctx.letterSpacing = style.letterSpacing; const metrics = ctx.measureText(text); const ascent = metrics.fontBoundingBoxAscent; const descent = metrics.fontBoundingBoxDescent; ctx.fillText(text, 0, (height - ascent - descent) / 2 + ascent); const url = `url(${mask.toDataURL()})`; canvas.style.maskImage = url; canvas.style.webkitMaskImage = url; setMasked(true); }; paintMask(); document.fonts?.ready.then(paintMask); const observer = new ResizeObserver(paintMask); observer.observe(wrap); return () => observer.disconnect(); }, [ready, text]); return ( {text}

); } function Block404({ title = "Error", description = ( <> Sorry, the page you were looking for doesn't exist. Check the{" "} URL for typos, or head back home. ), actionLabel = "Back to home", href = "/", onAction, className, ...props }: Block404Props) { const still = Boolean(useReducedMotion()); return (

{title}

{description && (

{description}

)} {onAction ? ( {actionLabel} ) : ( {actionLabel} )}

); } export { Block404 }; 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"namespace":"@clover-ui","registryDependencies":["https://cloverui.xyz/r/liquid-button.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/clover-ui/404-block.tsx","content":"$51","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]