43 lines
1.6 KiB
TypeScript
43 lines
1.6 KiB
TypeScript
import {Alert, AlertDescription, AlertTitle, Button} from '@plunk/ui';
|
|
import {AlertTriangle} from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import type {SecurityStatus} from '@plunk/types';
|
|
|
|
interface SecurityWarningBannerProps {
|
|
status: SecurityStatus;
|
|
}
|
|
|
|
export function SecurityWarningBanner({status}: SecurityWarningBannerProps) {
|
|
const hasCriticalViolations = status.violations.length > 0;
|
|
const hasWarnings = status.warnings.length > 0;
|
|
|
|
if (!hasCriticalViolations && !hasWarnings) {
|
|
return null;
|
|
}
|
|
|
|
const variant = hasCriticalViolations ? 'destructive' : 'warning';
|
|
const title = hasCriticalViolations
|
|
? 'Critical - Immediate Action Required'
|
|
: 'Warning - Action Recommended';
|
|
const messageColor = hasCriticalViolations ? 'text-red-800' : 'text-amber-800';
|
|
|
|
return (
|
|
<Alert variant={variant}>
|
|
<AlertTriangle className="h-4 w-4" />
|
|
<AlertTitle>{title}</AlertTitle>
|
|
<AlertDescription className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
|
|
<div className="space-y-2 flex-1">
|
|
<p className={`text-sm ${messageColor}`}>
|
|
{hasCriticalViolations
|
|
? 'Your account requires immediate attention. Review your sending practices to avoid suspension. Contact support for more details.'
|
|
: 'Your account health needs attention. Review your contact lists and sending practices to maintain good standing.'}
|
|
</p>
|
|
</div>
|
|
<Button asChild size="sm" variant="outline" className="w-full sm:w-auto flex-shrink-0">
|
|
<Link href="/settings?tab=security">View Details</Link>
|
|
</Button>
|
|
</AlertDescription>
|
|
</Alert>
|
|
);
|
|
}
|