File size: 1,648 Bytes
45a105b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | import type { ButtonHTMLAttributes, InputHTMLAttributes, ReactNode } from 'react'
import { statusTone, statusKey } from '../payments/status'
import { useI18n } from '../i18n'
import type { PaymentStatus } from '../types'
export function Button({ children, ...rest }: ButtonHTMLAttributes<HTMLButtonElement> & { children: ReactNode }) {
return (
<button className="btn" {...rest}>
{children}
</button>
)
}
interface FieldProps extends InputHTMLAttributes<HTMLInputElement> {
label: string
id: string
error?: string
}
export function Field({ label, id, error, ...rest }: FieldProps) {
const errId = error ? `${id}-error` : undefined
return (
<div className="field">
<label htmlFor={id}>{label}</label>
<input id={id} aria-invalid={!!error} aria-describedby={errId} {...rest} />
{error && (
<div id={errId} className="field-error" role="alert">
{error}
</div>
)}
</div>
)
}
export function StatusBadge({ status }: { status: PaymentStatus }) {
const { t } = useI18n()
return (
<span className={`badge tone-${statusTone(status)}`} role="status" aria-live="polite">
{t(statusKey(status) as never)}
</span>
)
}
export function Callout({ tone = 'info', children }: { tone?: 'info' | 'ok' | 'bad' | 'warn'; children: ReactNode }) {
return (
<div className={`callout tone-${tone}`} role="status">
{children}
</div>
)
}
export function Spinner({ label }: { label: string }) {
return (
<span className="spinner" role="status" aria-live="polite">
<span className="spin" aria-hidden="true" /> {label}
</span>
)
}
|