66 lines
2.9 KiB
TypeScript
66 lines
2.9 KiB
TypeScript
import {SecuritySummaryReportResultType} from "@/types/security-summary";
|
|
import {Card, CardContent, CardHeader, CardTitle} from "@/Components/ui/card";
|
|
import {Check, Copy, ShieldAlert} from "lucide-react";
|
|
import {Button} from "@/Components/ui/button";
|
|
import React from "react";
|
|
import {useClipboard} from "use-clipboard-copy";
|
|
|
|
export default function DashboardHeader({ reportData }: { reportData: SecuritySummaryReportResultType }) {
|
|
|
|
const [isCopied, setIsCopied] = React.useState(false);
|
|
const clipboard = useClipboard();
|
|
|
|
|
|
const handleCopy = () => {
|
|
clipboard.copy(reportData.idsummary)
|
|
setIsCopied(true)
|
|
setTimeout(() => setIsCopied(false), 2000)
|
|
}
|
|
|
|
return (
|
|
<Card className="mb-6">
|
|
<CardHeader>
|
|
<div className="flex justify-between items-center">
|
|
<CardTitle className="text-2xl">Security report for: {reportData.domain_name}</CardTitle>
|
|
<div className="flex items-center gap-2">
|
|
<ShieldAlert
|
|
className={`w-6 h-6 ${parseInt(reportData.risk_score) > 75 ? 'text-red-500' : 'text-yellow-500'}`}/>
|
|
<span className="text-xl font-bold">Risk Score: {reportData.risk_score}/100</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex sm:flex-row flex-col sm:items-center gap-2 text-gray-500">
|
|
<span className="flex flex-row gap-1">
|
|
<span className="font-bold mr-2">Scan ID:</span>
|
|
<pre className="px-2 bg-muted rounded-md">
|
|
<code className="text-sm whitespace-nowrap">{reportData.idsummary}</code>
|
|
</pre>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-8 w-8 p-0"
|
|
onClick={handleCopy}
|
|
aria-label={isCopied ? "Copied" : "Copy to clipboard"}
|
|
>
|
|
{isCopied ? (
|
|
<Check className="w-4 h-4 text-green-500"/>
|
|
) : (
|
|
<Copy className="w-4 h-4"/>
|
|
)}
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
<div className="flex sm:flex-row flex-col sm:items-center gap-2 text-gray-500">
|
|
<span>
|
|
<span className="font-bold mr-2">Scan Date:</span>
|
|
<span>{reportData.creation_date}</span>
|
|
</span>
|
|
<span>
|
|
<span className="font-bold mr-2">Last Edit:</span>
|
|
<span>{reportData.last_edit}</span>
|
|
</span>
|
|
</div>
|
|
</CardHeader>
|
|
</Card>
|
|
)
|
|
}
|