35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
|
interface ExplorerRetryAlertProps {
|
||
|
|
message: string
|
||
|
|
onRetry?: () => void
|
||
|
|
retryLabel?: string
|
||
|
|
className?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function ExplorerRetryAlert({
|
||
|
|
message,
|
||
|
|
onRetry,
|
||
|
|
retryLabel = 'Retry',
|
||
|
|
className = '',
|
||
|
|
}: ExplorerRetryAlertProps) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
role="alert"
|
||
|
|
className={[
|
||
|
|
'flex flex-col gap-3 rounded-xl border border-red-200 bg-red-50/70 px-4 py-3 dark:border-red-900/50 dark:bg-red-950/20 sm:flex-row sm:items-center sm:justify-between',
|
||
|
|
className,
|
||
|
|
].join(' ')}
|
||
|
|
>
|
||
|
|
<p className="text-sm leading-6 text-red-900 dark:text-red-100">{message}</p>
|
||
|
|
{onRetry ? (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={onRetry}
|
||
|
|
className="shrink-0 rounded-lg border border-red-300 bg-white px-3 py-1.5 text-sm font-semibold text-red-800 transition-colors hover:bg-red-50 dark:border-red-800 dark:bg-red-950 dark:text-red-100 dark:hover:bg-red-900/40"
|
||
|
|
>
|
||
|
|
{retryLabel}
|
||
|
|
</button>
|
||
|
|
) : null}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|