Files
MealQuest/web/src/ui/ErrorBanner.tsx
T
dev_agent 732aa92a8c
CI / ci (push) Successful in 1m30s
Sheet, ErrorBanner, Skeleton and EmptyState (#36)
Co-authored-by: dev_agent <dev_agent@cubecraftlabs.com>
Co-committed-by: dev_agent <dev_agent@cubecraftlabs.com>
2026-10-03 18:22:59 -04:00

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>
)
}