init

frontend/components/weather/stale-data-banner.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { AlertTriangle } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { differenceInMinutes, parseISO } from 'date-fns'
+
+interface StaleDataBannerProps {
+  lastUpdated: string
+  thresholdMinutes?: number
+  className?: string
+}
+
+export function StaleDataBanner({
+  lastUpdated,
+  thresholdMinutes = 10,
+  className,
+}: StaleDataBannerProps) {
+  const minutesOld = differenceInMinutes(new Date(), parseISO(lastUpdated))
+  const isStale = minutesOld > thresholdMinutes
+
+  if (!isStale) return null
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-3 rounded-lg border border-yellow-500 bg-yellow-50 dark:bg-yellow-950 p-4',
+        className
+      )}
+      role="alert"
+    >
+      <AlertTriangle className="h-5 w-5 text-yellow-600 dark:text-yellow-400 flex-shrink-0" />
+      <div className="flex-1">
+        <p className="text-sm font-medium text-yellow-800 dark:text-yellow-200">
+          Data may be outdated
+        </p>
+        <p className="text-xs text-yellow-700 dark:text-yellow-300">
+          Last updated {minutesOld} minutes ago. Live data may differ.
+        </p>
+      </div>
+    </div>
+  )
+}