43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
'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>
|
|
)
|
|
}
|