50: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"] 51: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"] 52:T2139,'use client'; import { useId, useMemo, useRef, useState } from 'react'; import { Input } from '@/components/ui/input'; import { cn } from '@/lib/utils'; import { IconEnter, IconSearch, FooterBar, type FooterSocial } from './footer-kit'; const KEYFRAMES = ` @keyframes su-link-in { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } } `; export type LinkSearchFooterVariant = 'Search' | 'Browse'; export interface LinkSearchGroup { title: string; links: { label: string; href: string }[]; } export interface LinkSearchFooterProps { links?: { label: string; href: string }[]; socials?: FooterSocial[]; brand: string; groups: LinkSearchGroup[]; placeholder?: string; emptyLabel?: string; copyright?: string; variant?: LinkSearchFooterVariant; className?: string; } interface FlatLink { label: string; href: string; group: string; } function highlight(label: string, query: string) { if (!query) return label; const at = label.toLowerCase().indexOf(query.toLowerCase()); if (at === -1) return label; return ( <> {label.slice(0, at)} {label.slice(at, at + query.length)} {label.slice(at + query.length)} ); } export function LinkSearchFooter({ links, socials, brand, groups, placeholder = 'Search every page…', emptyLabel = 'Nothing matches. Try a product name.', copyright, variant = 'Search', className, }: LinkSearchFooterProps) { const [query, setQuery] = useState(''); const [cursor, setCursor] = useState(0); const listId = useId(); const inputRef = useRef(null); const flat = useMemo( () => groups.flatMap((group) => group.links.map((link) => ({ ...link, group: group.title }))), [groups], ); const results = useMemo(() => { const needle = query.trim().toLowerCase(); if (!needle) return []; return flat .filter( (link) => link.label.toLowerCase().includes(needle) || link.group.toLowerCase().includes(needle), ) .slice(0, 7); }, [flat, query]); const searching = variant === 'Search' && query.trim().length > 0; function onKeyDown(event: React.KeyboardEvent) { if (results.length === 0) return; if (event.key === 'ArrowDown') { event.preventDefault(); setCursor((current) => (current + 1) % results.length); } else if (event.key === 'ArrowUp') { event.preventDefault(); setCursor((current) => (current - 1 + results.length) % results.length); } else if (event.key === 'Escape') { setQuery(''); setCursor(0); } } return (