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:T1d3b,"use client"; import { MapPinIcon } from "lucide-react"; import type { ReactNode } from "react"; import { useEffect, useRef, useState } from "react"; import { Autocomplete, AutocompleteInput, AutocompleteItem, AutocompleteList, AutocompletePopup, AutocompleteStatus, } from "@/registry/default/ui/autocomplete"; import { Spinner } from "@/registry/default/ui/spinner"; // Set NEXT_PUBLIC_GOOGLE_MAPS_API_KEY with the Places API (New) enabled to fetch // live suggestions. Without a key, the demo falls back to sample addresses. const GOOGLE_MAPS_API_KEY = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY ?? ""; type AddressSuggestion = { placeId: string; text: string; mainText: string; secondaryText: string; }; const sampleAddresses: AddressSuggestion[] = [ { mainText: "1600 Amphitheatre Parkway", secondaryText: "Mountain View, CA 94043, USA", }, { mainText: "1600 Pennsylvania Avenue NW", secondaryText: "Washington, DC 20500, USA", }, { mainText: "350 Fifth Avenue", secondaryText: "New York, NY 10118, USA" }, { mainText: "221B Baker Street", secondaryText: "London NW1 6XE, United Kingdom", }, { mainText: "Champ de Mars, 5 Avenue Anatole France", secondaryText: "75007 Paris, France", }, { mainText: "Piazza del Colosseo, 1", secondaryText: "00184 Roma RM, Italy", }, { mainText: "Platz der Republik 1", secondaryText: "11011 Berlin, Germany" }, { mainText: "1 Macquarie Street", secondaryText: "Sydney NSW 2000, Australia", }, ].map((address, index) => ({ ...address, placeId: `sample-${index + 1}`, text: `${address.mainText}, ${address.secondaryText}`, })); // A short-lived session token groups Autocomplete + Place Details requests // for billing. function newSessionToken() { if (typeof crypto !== "undefined" && "randomUUID" in crypto) { return crypto.randomUUID(); } return Math.random().toString(36).slice(2); } type PlacesAutocompleteResponse = { suggestions?: { placePrediction?: { placeId?: string; text?: { text?: string }; structuredFormat?: { mainText?: { text?: string }; secondaryText?: { text?: string }; }; }; }[]; }; async function fetchAddressSuggestions( query: string, sessionToken: string, signal: AbortSignal, ): Promise { const response = await fetch( "https://places.googleapis.com/v1/places:autocomplete", { body: JSON.stringify({ input: query, sessionToken }), headers: { "Content-Type": "application/json", "X-Goog-Api-Key": GOOGLE_MAPS_API_KEY, }, method: "POST", signal, }, ); if (!response.ok) { throw new Error("Places API request failed"); } const data = (await response.json()) as PlacesAutocompleteResponse; const suggestions: AddressSuggestion[] = []; for (const suggestion of data.suggestions ?? []) { const prediction = suggestion.placePrediction; if (!prediction?.placeId) continue; const text = prediction.text?.text ?? ""; suggestions.push({ mainText: prediction.structuredFormat?.mainText?.text ?? text, placeId: prediction.placeId, secondaryText: prediction.structuredFormat?.secondaryText?.text ?? "", text, }); } return suggestions; } async function searchSampleAddresses( query: string, ): Promise { await new Promise((resolve) => setTimeout(resolve, Math.random() * 500 + 100), ); const lowerQuery = query.toLowerCase(); return sampleAddresses.filter((address) => address.text.toLowerCase().includes(lowerQuery), ); } export default function Particle() { const [searchValue, setSearchValue] = useState(""); const [isLoading, setIsLoading] = useState(false); const [suggestions, setSuggestions] = useState([]); const [error, setError] = useState(null); const sessionTokenRef = useRef(null); useEffect(() => { const query = searchValue.trim(); if (!query) { setSuggestions([]); setIsLoading(false); setError(null); return; } setIsLoading(true); setError(null); let ignore = false; const controller = new AbortController(); const timeoutId = setTimeout(async () => { try { sessionTokenRef.current ??= newSessionToken(); const results = GOOGLE_MAPS_API_KEY ? await fetchAddressSuggestions( query, sessionTokenRef.current, controller.signal, ) : await searchSampleAddresses(query); if (!ignore) setSuggestions(results); } catch { if (!ignore && !controller.signal.aborted) { setError("Could not load address suggestions. Please try again."); setSuggestions([]); } } finally { if (!ignore) setIsLoading(false); } }, 300); return () => { ignore = true; controller.abort(); clearTimeout(timeoutId); }; }, [searchValue]); let status: ReactNode = `${suggestions.length} suggestion${suggestions.length === 1 ? "" : "s"} found`; if (isLoading) { status = ( Searching addresses... ); } else if (error) { status = ( {error} ); } else if (suggestions.length === 0 && searchValue) { status = ( No addresses found for "{searchValue}" ); } const shouldRenderPopup = searchValue.trim() !== ""; return ( (item as AddressSuggestion).text} onValueChange={(value, eventDetails) => { setSearchValue(value); if (eventDetails.reason === "item-press") { // Selecting a suggestion ends the billing session. In a real app, // fetch the place details with the same token before resetting it. sessionTokenRef.current = null; } }} value={searchValue} > } /> {shouldRenderPopup && ( {status} {(suggestion: AddressSuggestion) => ( {suggestion.mainText} {suggestion.secondaryText} )} )} ); } 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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"namespace":"@coss","registryDependencies":["@coss/autocomplete","@coss/spinner"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/default/particles/p-autocomplete-16.tsx","content":"$51","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]