scott
4974780d89
Fetches active Temporary Flight Restrictions from the FAA website, filters by configured state (LOCATION_STATE env var), and displays a red warning banner at the top of the dashboard when TFRs are present. Data is cached for 30 minutes and degrades gracefully if the FAA is unreachable. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
'use client'
|
|
|
|
import { AlertTriangle, ExternalLink } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
import type { TFR } from '@/lib/types'
|
|
|
|
interface TfrBannerProps {
|
|
tfrs: TFR[]
|
|
className?: string
|
|
}
|
|
|
|
export function TfrBanner({ tfrs, className }: TfrBannerProps) {
|
|
if (!tfrs || tfrs.length === 0) return null
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex items-start gap-3 rounded-lg border border-red-500 bg-red-50 dark:bg-red-950 p-4',
|
|
className
|
|
)}
|
|
role="alert"
|
|
>
|
|
<AlertTriangle className="h-5 w-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
|
|
<div className="flex-1">
|
|
<p className="text-sm font-medium text-red-800 dark:text-red-200">
|
|
{tfrs.length} Active TFR{tfrs.length !== 1 ? 's' : ''} in Area
|
|
</p>
|
|
<ul className="mt-1 space-y-1">
|
|
{tfrs.map((tfr) => (
|
|
<li key={tfr.notam_id} className="text-xs text-red-700 dark:text-red-300">
|
|
<span className="font-medium">{tfr.type}</span>
|
|
{tfr.description && <> — {tfr.description}</>}
|
|
{tfr.detail_url && (
|
|
<a
|
|
href={tfr.detail_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="ml-1 inline-flex items-center gap-0.5 text-red-600 dark:text-red-400 hover:underline"
|
|
>
|
|
Details <ExternalLink className="h-3 w-3" />
|
|
</a>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<a
|
|
href="https://tfr.faa.gov/tfr3/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="mt-2 inline-flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400 hover:underline"
|
|
>
|
|
View all TFRs on FAA website <ExternalLink className="h-3 w-3" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|