65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
// frontend\src\app\components\Alert.tsx
|
|
|
|
'use client';
|
|
|
|
import clsx from 'clsx';
|
|
|
|
type AlertType = 'solid' | 'soft';
|
|
type AlertColor =
|
|
| 'dark'
|
|
| 'secondary'
|
|
| 'info'
|
|
| 'success'
|
|
| 'danger'
|
|
| 'warning'
|
|
| 'light';
|
|
|
|
type AlertProps = {
|
|
title?: string;
|
|
message: string;
|
|
type?: AlertType;
|
|
color?: AlertColor;
|
|
};
|
|
|
|
export default function Alert({
|
|
title,
|
|
message,
|
|
type = 'solid',
|
|
color = 'info',
|
|
}: AlertProps) {
|
|
const baseClasses =
|
|
'mt-2 text-sm rounded-lg p-4 transition-all duration-200 focus:outline-none focus:ring-2';
|
|
|
|
const classMap: Record<AlertType, Record<AlertColor, string>> = {
|
|
solid: {
|
|
dark: 'bg-gray-800 text-white dark:bg-white dark:text-neutral-800',
|
|
secondary: 'bg-gray-500 text-white',
|
|
info: 'bg-blue-600 text-white dark:bg-blue-500',
|
|
success: 'bg-teal-500 text-white',
|
|
danger: 'bg-red-500 text-white',
|
|
warning: 'bg-yellow-500 text-white',
|
|
light: 'bg-white text-gray-600',
|
|
},
|
|
soft: {
|
|
dark: 'bg-gray-100 border border-gray-200 text-gray-800 dark:bg-white/10 dark:border-white/20 dark:text-white',
|
|
secondary: 'bg-gray-50 border border-gray-200 text-gray-600 dark:bg-white/10 dark:border-white/10 dark:text-neutral-400',
|
|
info: 'bg-blue-100 border border-blue-200 text-blue-800 dark:bg-blue-800/10 dark:border-blue-900 dark:text-blue-500',
|
|
success: 'bg-teal-100 border border-teal-200 text-teal-800 dark:bg-teal-800/10 dark:border-teal-900 dark:text-teal-500',
|
|
danger: 'bg-red-100 border border-red-200 text-red-800 dark:bg-red-800/10 dark:border-red-900 dark:text-red-500',
|
|
warning: 'bg-yellow-100 border border-yellow-200 text-yellow-800 dark:bg-yellow-800/10 dark:border-yellow-900 dark:text-yellow-500',
|
|
light: 'bg-white/10 border border-white/10 text-white',
|
|
},
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={clsx(baseClasses, classMap[type][color])}
|
|
role="alert"
|
|
tabIndex={-1}
|
|
>
|
|
{title && <div className="font-bold mb-1">{title}</div>}
|
|
<div>{message}</div>
|
|
</div>
|
|
);
|
|
}
|