22 lines
661 B
TypeScript
22 lines
661 B
TypeScript
|
import type { ReactNode } from 'react'
|
||
|
|
import { Button } from './Button.tsx'
|
||
|
|
import { Card } from './Card.tsx'
|
||
|
|
import styles from './ErrorBanner.module.css'
|
||
|
|
|
||
|
|
export type ErrorBannerProps = {
|
||
|
|
// What went wrong, in the caller's words.
|
||
|
|
children: ReactNode
|
||
|
|
onRetry: () => void
|
||
|
|
retryLabel?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
// Muted neutral-100 card with grape-700 text and a Retry button.
|
||
|
|
export function ErrorBanner({ children, onRetry, retryLabel = 'Retry' }: ErrorBannerProps) {
|
||
|
|
return (
|
||
|
|
<Card tone="muted" role="alert" className={styles.banner}>
|
||
|
|
<p className={styles.message}>{children}</p>
|
||
|
|
<Button onClick={onRetry}>{retryLabel}</Button>
|
||
|
|
</Card>
|
||
|
|
)
|
||
|
|
}
|