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:T101c,"use client"; import type { ReactNode } from "react"; import { useEffect, useState } from "react"; import { Autocomplete, AutocompleteInput, AutocompleteItem, AutocompleteList, AutocompletePopup, AutocompleteStatus, useAutocompleteFilter, } from "@/registry/default/ui/autocomplete"; import { Spinner } from "@/registry/default/ui/spinner"; type Movie = { id: string; title: string; year: number }; const top100Movies: Movie[] = [ { id: "1", title: "The Shawshank Redemption", year: 1994 }, { id: "2", title: "The Godfather", year: 1972 }, { id: "3", title: "The Dark Knight", year: 2008 }, { id: "4", title: "The Godfather Part II", year: 1974 }, { id: "5", title: "12 Angry Men", year: 1957 }, { id: "8", title: "Pulp Fiction", year: 1994 }, { id: "11", title: "Forrest Gump", year: 1994 }, { id: "14", title: "Inception", year: 2010 }, ]; async function searchMovies( query: string, filter: (item: string, query: string) => boolean, ): Promise { await new Promise((resolve) => setTimeout(resolve, Math.random() * 500 + 100), ); if (Math.random() < 0.01 || query === "will_error") { throw new Error("Network error"); } return top100Movies.filter( (movie) => filter(movie.title, query) || filter(movie.year.toString(), query), ); } export default function Particle() { const [searchValue, setSearchValue] = useState(""); const [isLoading, setIsLoading] = useState(false); const [searchResults, setSearchResults] = useState([]); const [error, setError] = useState(null); const { contains } = useAutocompleteFilter({ sensitivity: "base" }); useEffect(() => { if (!searchValue) { setSearchResults([]); setIsLoading(false); return; } setIsLoading(true); setError(null); let ignore = false; const timeoutId = setTimeout(async () => { try { const results = await searchMovies(searchValue, contains); if (!ignore) setSearchResults(results); } catch { if (!ignore) { setError("Failed to fetch movies. Please try again."); setSearchResults([]); } } finally { if (!ignore) setIsLoading(false); } }, 300); return () => { clearTimeout(timeoutId); ignore = true; }; }, [searchValue, contains]); let status: ReactNode = `${searchResults.length} result${searchResults.length === 1 ? "" : "s"} found`; if (isLoading) { status = ( Searching... ); } else if (error) { status = ( {error} ); } else if (searchResults.length === 0 && searchValue) { status = ( Movie or year "{searchValue}" does not exist in the Top 100 IMDb movies ); } const shouldRenderPopup = searchValue !== ""; return ( (item as Movie).title} onValueChange={setSearchValue} value={searchValue} > {shouldRenderPopup && ( {status} {(movie: Movie) => (

{movie.title}

{movie.year}

)} )} ); } 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":[null,["$","$L4f",null,{"namespace":"@coss","registryDependencies":["@coss/autocomplete","@coss/spinner"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/default/particles/p-autocomplete-12.tsx","content":"$51","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]