Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 8x 8x 43x 43x | import { Text } from '@/components/text';
export type MessageType = 'error' | 'success' | 'warning' | 'info';
const messageStyles = {
error: {
container: 'bg-red-50 border-red-200 text-red-600',
button: 'text-red-500',
},
success: {
container: 'bg-green-50 border-green-200 text-green-600',
button: 'text-green-500',
},
warning: {
container: 'bg-yellow-50 border-yellow-200 text-yellow-600',
button: 'text-yellow-500',
},
info: {
container: 'bg-blue-50 border-blue-200 text-blue-600',
button: 'text-blue-500',
},
};
type FormMessageProps = {
type: MessageType;
message: string;
onDismiss?: () => void;
className?: string;
};
export const FormMessage = ({
type,
message,
onDismiss,
className = '',
}: FormMessageProps) => {
const styles = messageStyles[type];
return (
<div
className={`mb-4 p-3 border rounded-md ${styles.container} ${className}`}
>
<Text size="sm">{message}</Text>
{onDismiss && (
<button
onClick={onDismiss}
className={`text-xs underline mt-1 ${styles.button}`}
aria-label="Dismiss message"
>
Dismiss
</button>
)}
</div>
);
};
|