ars9
a5f87b904e
- Add ScenarioDetailPage with DescriptionList, steps table, run/delete actions - Add /scenarios/:id route - Add i18n keys for scenario detail fields, steps columns, and 404 error - Add 'comfortable' and 'inline' layout variants to DescriptionList (with compact as default stacked) - Apply layout="comfortable" to session, environment, and scenario detail pages - Apply layout="compact" to EnvironmentsPage card DescriptionList - Refactor EnvironmentsPage card to use ContextMenu (view/edit/delete) with icons - Add ScenariosPage clickable rows, Play icon (primary) and Trash2 icon (danger) action buttons - Add Page.module.css sectionHeading and stepsSection utility classes - Fix Notification.tsx and Table.tsx formatting (prettier)
32 lines
1.0 KiB
TypeScript
32 lines
1.0 KiB
TypeScript
import { AlertCircle, AlertTriangle, CheckCircle2, Info, StickyNote } from 'lucide-react';
|
|
import styles from './Notification.module.css';
|
|
|
|
export type NotificationVariant = 'info' | 'success' | 'error' | 'warning' | 'note';
|
|
|
|
export interface NotificationProps {
|
|
variant?: NotificationVariant;
|
|
title?: string;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const ICONS: Record<NotificationVariant, React.ReactNode> = {
|
|
info: <Info size={16} />,
|
|
success: <CheckCircle2 size={16} />,
|
|
error: <AlertCircle size={16} />,
|
|
warning: <AlertTriangle size={16} />,
|
|
note: <StickyNote size={16} />,
|
|
};
|
|
|
|
export function Notification({ variant = 'info', title, children, className }: NotificationProps) {
|
|
return (
|
|
<div className={[styles.notification, styles[variant], className].filter(Boolean).join(' ')}>
|
|
<span className={styles.icon}>{ICONS[variant]}</span>
|
|
<div className={styles.body}>
|
|
{title && <p className={styles.title}>{title}</p>}
|
|
<p className={styles.message}>{children}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|