36 lines
1.5 KiB
TypeScript
36 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
|
|
type AlertVariant = 'info' | 'success' | 'warning' | 'error';
|
|
|
|
const variantStyles: Record<AlertVariant, string> = {
|
|
info: 'bg-blue-50 text-blue-800 border-blue-300 dark:bg-blue-900/30 dark:text-blue-200 dark:border-blue-700',
|
|
success: 'bg-green-50 text-green-800 border-green-300 dark:bg-green-900/30 dark:text-green-200 dark:border-green-700',
|
|
warning: 'bg-amber-50 text-amber-800 border-amber-300 dark:bg-amber-900/30 dark:text-amber-200 dark:border-amber-700',
|
|
error: 'bg-red-50 text-red-800 border-red-300 dark:bg-red-900/30 dark:text-red-200 dark:border-red-700'
|
|
};
|
|
|
|
export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
title?: string;
|
|
variant?: AlertVariant;
|
|
children?: React.ReactNode;
|
|
icon?: React.ReactNode;
|
|
compact?: boolean;
|
|
}
|
|
|
|
export const Alert: React.FC<AlertProps> = ({ title, variant = 'info', children, icon, compact, className, ...rest }) => {
|
|
return (
|
|
<div
|
|
className={`border rounded-md ${variantStyles[variant]} ${compact ? 'px-3 py-2 text-sm' : 'px-4 py-3'} flex items-start space-x-3 ${className || ''}`}
|
|
{...rest}
|
|
>
|
|
{icon && <div className="pt-0.5">{icon}</div>}
|
|
<div className="flex-1">
|
|
{title && <div className="font-medium mb-0.5">{title}</div>}
|
|
{children && <div className="leading-snug">{children}</div>}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Alert;
|