@kentcdodds/package-app-kit

Design tokens, PWA install/update, About/version, cache helpers, and optional realtime notes sync for Kody package apps.

app/ui/error-banner.tsx

33 lines · 873 B · TypeScript

/** @jsxRuntime automatic */
/** @jsxImportSource remix/ui */
import type { Handle, RemixNode } from 'remix/ui'

export type ErrorBannerProps = {
	title?: string
	message: string
	hint?: RemixNode
	/** Shown via data-tip (hover/focus) */
	detail?: string
}

/**
 * Inline error alert for reserved content areas.
 * Prefer toasts for ephemeral failures (zero CLS); use this when replacing expected content.
 */
export function ErrorBanner(handle: Handle<ErrorBannerProps>) {
	return () => {
		const { title, message, hint, detail } = handle.props
		return (
			<div
				class="pak-error"
				role="alert"
				tabindex="0"
				data-tip={detail || undefined}
			>
				<strong class="pak-error-title">{title || 'Something went wrong'}</strong>
				<p class="pak-error-message">{message}</p>
				{hint ? <p class="pak-muted pak-error-hint">{hint}</p> : null}
			</div>
		)
	}
}