"use client"; import { useState } from "react"; import { Search } from "lucide-react"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; export function CallsignSearch() { const [ident, setIdent] = useState(""); const [result, setResult] = useState<{ ident: string; decode: string } | null>(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const handleSearch = async () => { if (!ident) return; setLoading(true); setError(null); setResult(null); try { const res = await fetch(`/api/callsign?callsign=${ident}`); if (!res.ok) { throw new Error("Failed to fetch data"); } const data = await res.json(); setResult({ ident: data.ident, decode: data.decode }); } catch (error) { setError("Error fetching callsign data. Please try again."); } finally { setLoading(false); } }; return (
setIdent(e.target.value)} placeholder="Enter IDENT" className="max-w-xs" />
{loading &&

Loading...

} {error &&

{error}

} {result && (

IDENT: {result.ident}

CALLSIGN: {result.decode}

)}
); }