78 lines
2.8 KiB
TypeScript
78 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import {Heading, Text} from '@astryxdesign/core/Text';
|
|
import {Badge} from '@astryxdesign/core/Badge';
|
|
import {Icon} from '@astryxdesign/core/Icon';
|
|
import {ICONS} from '@/shared/utils/icons';
|
|
import {BUSINESS_ALERTS} from '../../services/commerceService';
|
|
|
|
export function BusinessAlerts() {
|
|
return (
|
|
<div className="space-y-3">
|
|
<Heading level={4} className="text-base font-bold text-white">
|
|
Real-Time Business & Operational Alerts
|
|
</Heading>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
{BUSINESS_ALERTS.map((alert) => {
|
|
const isCritical = alert.severity === 'critical';
|
|
const isWarning = alert.severity === 'warning';
|
|
const isSuccess = alert.severity === 'success';
|
|
|
|
const borderClass = isCritical
|
|
? 'border-rose-500/30 bg-rose-500/[0.03]'
|
|
: isWarning
|
|
? 'border-amber-500/30 bg-amber-500/[0.03]'
|
|
: isSuccess
|
|
? 'border-emerald-500/30 bg-emerald-500/[0.03]'
|
|
: 'border-blue-500/30 bg-blue-500/[0.03]';
|
|
|
|
return (
|
|
<div
|
|
key={alert.id}
|
|
className={`rounded-xl border p-4 shadow-sm flex flex-col justify-between gap-3 ${borderClass}`}
|
|
>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="flex items-start gap-2.5">
|
|
<Icon
|
|
icon={isCritical || isWarning ? ICONS.alert : isSuccess ? ICONS.up : ICONS.info}
|
|
size="sm"
|
|
className={
|
|
isCritical
|
|
? 'text-rose-400'
|
|
: isWarning
|
|
? 'text-amber-400'
|
|
: isSuccess
|
|
? 'text-emerald-400'
|
|
: 'text-blue-400'
|
|
}
|
|
/>
|
|
<div>
|
|
<span className="text-sm font-bold text-white block">{alert.title}</span>
|
|
<Text size="sm" color="secondary" className="mt-0.5">
|
|
{alert.description}
|
|
</Text>
|
|
</div>
|
|
</div>
|
|
<Badge
|
|
variant={isCritical ? 'error' : isWarning ? 'warning' : isSuccess ? 'success' : 'info'}
|
|
label={alert.type.replace('_', ' ').toUpperCase()}
|
|
/>
|
|
</div>
|
|
|
|
<div className="pt-2 border-t border-white/5 flex justify-end">
|
|
<button
|
|
type="button"
|
|
className="text-xs font-bold text-white hover:text-amber-300 transition-colors flex items-center gap-1"
|
|
>
|
|
{alert.actionText} →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|