54 lines
2.2 KiB
TypeScript
54 lines
2.2 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) {
|
|
// Don't show if no warnings or violations
|
|
const hasCriticalViolations = status.violations.length > 0;
|
|
const hasWarnings = status.warnings.length > 0;
|
|
|
|
if (!hasCriticalViolations && !hasWarnings) {
|
|
return null;
|
|
}
|
|
|
|
// Determine severity - critical violations take precedence
|
|
const variant = hasCriticalViolations ? 'destructive' : 'warning';
|
|
const title = hasCriticalViolations
|
|
? 'Critical Security Violations - Immediate Action Required'
|
|
: 'Security Warning - Action Required';
|
|
const issues = hasCriticalViolations ? status.violations : status.warnings;
|
|
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 font-medium">Your project has exceeded the following security thresholds:</p>
|
|
<ul className={`list-disc list-inside space-y-1 text-sm ${messageColor}`}>
|
|
{issues.map((issue, idx) => (
|
|
<li key={idx}>{issue}</li>
|
|
))}
|
|
</ul>
|
|
<p className={`text-xs ${messageColor} mt-2`}>
|
|
{hasCriticalViolations
|
|
? 'Your project may be suspended soon. Please review the detailed metrics immediately and take action to improve your email quality.'
|
|
: 'High bounce or complaint rates can lead to project suspension. Review the detailed metrics and take action to improve your email quality.'}
|
|
</p>
|
|
</div>
|
|
<Link href="/settings?tab=security">
|
|
<Button size="sm" variant="outline" className="w-full sm:w-auto flex-shrink-0">
|
|
View Details
|
|
</Button>
|
|
</Link>
|
|
</AlertDescription>
|
|
</Alert>
|
|
);
|
|
}
|