CI / ci (push) Successful in 2m39s
Co-authored-by: orchestrator-agent <20+orchestrator-agent@code.cubecraftcreations.com>
24 lines
782 B
TypeScript
24 lines
782 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
|
|
// What Retry does; without it there is nothing to retry and no button.
|
|
onRetry?: () => void
|
|
retryLabel?: string
|
|
}
|
|
|
|
// Muted neutral-100 card with grape-700 text and, given onRetry, 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>
|
|
{onRetry !== undefined && <Button onClick={onRetry}>{retryLabel}</Button>}
|
|
</Card>
|
|
)
|
|
}
|