{
  "id": "flight-tracker",
  "name": "Flight Tracker",
  "category": "travel",
  "tags": ["travel", "flight", "status"],
  "description": "Flight status lookup using Aviation Edge API.",
  "triggers": ["flight tracker", "track flight", "flight status", "airport"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "function FlightTracker() {\n  const [flight, setFlight] = React.useState('');\n  const [loading, setLoading] = React.useState(false);\n  const [data, setData] = React.useState(null);\n  const [error, setError] = React.useState('');\n  const search = async () => {\n    if (!flight.trim()) return;\n    setLoading(true);\n    setError('');\n    setData(null);\n    try {\n      const res = await fetch(`https://api.aviationstack.com/v1/flights?access_key=REPLACE_WITH_API_KEY&flight_iata=${flight.trim().toUpperCase()}`);\n      const json = await res.json();\n      if (json.data && json.data.length > 0) {\n        setData(json.data[0]);\n      } else {\n        setError('No flight found. Try a valid IATA code (e.g. AA123).');\n      }\n    } catch (e) {\n      setError('Request failed. Check your API key or network.');\n    } finally {\n      setLoading(false);\n    }\n  };\n  const statusColor = (s) => {\n    if (!s) return '#888';\n    const l = s.toLowerCase();\n    if (l.includes('landed') || l.includes('arrived')) return '#22c55e';\n    if (l.includes('delayed')) return '#ef4444';\n    if (l.includes('cancelled')) return '#dc2626';\n    if (l.includes('scheduled') || l.includes('active')) return '#3b82f6';\n    return '#eab308';\n  };\n  return (\n    <div style={{ fontFamily: 'system-ui, sans-serif', padding: 16, background: '#fff', borderRadius: 12, height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column' }}>\n      <h3 style={{ margin: '0 0 10px 0', fontSize: 16, color: '#222' }}>Flight Tracker</h3>\n      <div style={{ display: 'flex', gap: 8, marginBottom: 10 }}>\n        <input value={flight} onChange={(e) => setFlight(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && search()} placeholder=\"Flight number (e.g. AA123)\" style={{ flex: 1, padding: '6px 10px', borderRadius: 8, border: '1px solid #ddd', fontFamily: 'inherit', fontSize: 13, textTransform: 'uppercase' }} />\n        <button onClick={search} disabled={loading} style={{ padding: '6px 12px', borderRadius: 8, border: 'none', background: '#4f46e5', color: '#fff', cursor: 'pointer', fontFamily: 'inherit', fontWeight: 500, opacity: loading ? 0.7 : 1 }}>{loading ? '...' : 'Track'}</button>\n      </div>\n      {error && <div style={{ padding: 10, borderRadius: 8, background: '#fef2f2', color: '#b91c1c', fontSize: 13, marginBottom: 10 }}>{error}</div>}\n      {data && (\n        <div style={{ flex: 1, overflow: 'auto' }}>\n          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>\n            <span style={{ fontSize: 13, fontWeight: 600, color: '#333' }}>{data.airline?.name} {data.flight?.iata}</span>\n            <span style={{ padding: '2px 8px', borderRadius: 99, background: statusColor(data.flight_status) + '15', color: statusColor(data.flight_status), fontSize: 12, fontWeight: 600, textTransform: 'capitalize' }}>{data.flight_status}</span>\n          </div>\n          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 8, alignItems: 'center', marginBottom: 10 }}>\n            <div style={{ textAlign: 'center' }}>\n              <div style={{ fontSize: 24, fontWeight: 700, color: '#222' }}>{data.departure?.iata}</div>\n              <div style={{ fontSize: 11, color: '#888' }}>{data.departure?.airport}</div>\n              <div style={{ fontSize: 12, color: '#555', marginTop: 2 }}>{data.departure?.scheduled ? new Date(data.departure.scheduled).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '—'}</div>\n            </div>\n            <div style={{ textAlign: 'center', color: '#aaa' }}>✈</div>\n            <div style={{ textAlign: 'center' }}>\n              <div style={{ fontSize: 24, fontWeight: 700, color: '#222' }}>{data.arrival?.iata}</div>\n              <div style={{ fontSize: 11, color: '#888' }}>{data.arrival?.airport}</div>\n              <div style={{ fontSize: 12, color: '#555', marginTop: 2 }}>{data.arrival?.scheduled ? new Date(data.arrival.scheduled).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '—'}</div>\n            </div>\n          </div>\n          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>\n            <div style={{ padding: 8, borderRadius: 8, background: '#f8f8f8', fontSize: 12 }}>\n              <div style={{ color: '#888', marginBottom: 2 }}>Terminal / Gate</div>\n              <div style={{ color: '#333', fontWeight: 500 }}>{data.departure?.terminal || '—'} / {data.departure?.gate || '—'}</div>\n            </div>\n            <div style={{ padding: 8, borderRadius: 8, background: '#f8f8f8', fontSize: 12 }}>\n              <div style={{ color: '#888', marginBottom: 2 }}>Arrival Terminal / Gate</div>\n              <div style={{ color: '#333', fontWeight: 500 }}>{data.arrival?.terminal || '—'} / {data.arrival?.gate || '—'}</div>\n            </div>\n          </div>\n        </div>\n      )}\n      {!data && !error && !loading && (\n        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#bbb', fontSize: 13 }}>\n          Enter a flight number to track\n        </div>\n      )}\n    </div>\n  );\n}\nrender(<FlightTracker/>);",
  "placeholders": [
    { "name": "REPLACE_WITH_API_KEY", "description": "Aviation Stack API access key", "default": "" }
  ]
}