feat(phase-23): add Threat Actor profiles with MITRE CTI import, API, heatmap and gap analysis (T-208 to T-212)
This commit is contained in:
571
frontend/src/pages/ThreatActorDetailPage.tsx
Normal file
571
frontend/src/pages/ThreatActorDetailPage.tsx
Normal file
@@ -0,0 +1,571 @@
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import {
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
ArrowLeft,
|
||||
Globe,
|
||||
Target,
|
||||
Shield,
|
||||
ExternalLink,
|
||||
BookOpen,
|
||||
AlertTriangle,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Clock,
|
||||
Crosshair,
|
||||
FlaskConical,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
getThreatActor,
|
||||
getThreatActorCoverage,
|
||||
getThreatActorGaps,
|
||||
type ThreatActorTechnique,
|
||||
type GapItem,
|
||||
} from "../api/threat-actors";
|
||||
|
||||
// ── MITRE ATT&CK Tactics in kill chain order ──────────────────────
|
||||
const TACTICS_ORDER = [
|
||||
"reconnaissance",
|
||||
"resource-development",
|
||||
"initial-access",
|
||||
"execution",
|
||||
"persistence",
|
||||
"privilege-escalation",
|
||||
"defense-evasion",
|
||||
"credential-access",
|
||||
"discovery",
|
||||
"lateral-movement",
|
||||
"collection",
|
||||
"command-and-control",
|
||||
"exfiltration",
|
||||
"impact",
|
||||
];
|
||||
|
||||
/** Status → cell colour. */
|
||||
function statusCellColor(status: string | null) {
|
||||
switch (status) {
|
||||
case "validated":
|
||||
return "bg-green-500/80 border-green-400/40";
|
||||
case "partial":
|
||||
return "bg-yellow-500/80 border-yellow-400/40";
|
||||
case "in_progress":
|
||||
return "bg-blue-500/60 border-blue-400/40";
|
||||
case "not_covered":
|
||||
return "bg-red-500/70 border-red-400/40";
|
||||
case "not_evaluated":
|
||||
default:
|
||||
return "bg-gray-700/50 border-gray-600/40";
|
||||
}
|
||||
}
|
||||
|
||||
function statusLabel(status: string | null) {
|
||||
switch (status) {
|
||||
case "validated":
|
||||
return "Validated";
|
||||
case "partial":
|
||||
return "Partial";
|
||||
case "in_progress":
|
||||
return "In Progress";
|
||||
case "not_covered":
|
||||
return "Not Covered";
|
||||
case "review_required":
|
||||
return "Review Required";
|
||||
case "not_evaluated":
|
||||
default:
|
||||
return "Not Evaluated";
|
||||
}
|
||||
}
|
||||
|
||||
function statusIcon(status: string | null) {
|
||||
switch (status) {
|
||||
case "validated":
|
||||
return <CheckCircle className="h-3.5 w-3.5 text-green-400" />;
|
||||
case "partial":
|
||||
return <AlertTriangle className="h-3.5 w-3.5 text-yellow-400" />;
|
||||
case "in_progress":
|
||||
return <Clock className="h-3.5 w-3.5 text-blue-400" />;
|
||||
case "not_covered":
|
||||
return <XCircle className="h-3.5 w-3.5 text-red-400" />;
|
||||
default:
|
||||
return <Shield className="h-3.5 w-3.5 text-gray-500" />;
|
||||
}
|
||||
}
|
||||
|
||||
export default function ThreatActorDetailPage() {
|
||||
const { actorId } = useParams();
|
||||
const navigate = useNavigate();
|
||||
|
||||
// ── Queries ─────────────────────────────────────────────────────
|
||||
const { data: actor, isLoading, error } = useQuery({
|
||||
queryKey: ["threat-actor", actorId],
|
||||
queryFn: () => getThreatActor(actorId!),
|
||||
enabled: !!actorId,
|
||||
});
|
||||
|
||||
const { data: coverage } = useQuery({
|
||||
queryKey: ["threat-actor-coverage", actorId],
|
||||
queryFn: () => getThreatActorCoverage(actorId!),
|
||||
enabled: !!actorId,
|
||||
});
|
||||
|
||||
const { data: gaps } = useQuery({
|
||||
queryKey: ["threat-actor-gaps", actorId],
|
||||
queryFn: () => getThreatActorGaps(actorId!),
|
||||
enabled: !!actorId,
|
||||
});
|
||||
|
||||
// ── Loading / Error ─────────────────────────────────────────────
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-24">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-cyan-400" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !actor) {
|
||||
return (
|
||||
<div className="rounded-xl border border-red-500/30 bg-red-900/20 p-6 text-center">
|
||||
<AlertCircle className="mx-auto h-8 w-8 text-red-400" />
|
||||
<p className="mt-2 text-sm text-red-400">
|
||||
{error ? (error as Error)?.message : "Threat actor not found"}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Organise techniques by tactic for heatmap ───────────────────
|
||||
const techniquesByTactic: Record<string, ThreatActorTechnique[]> = {};
|
||||
for (const tech of actor.techniques) {
|
||||
const tactic = tech.tactic || "unknown";
|
||||
// A technique's tactic field may be comma-separated
|
||||
const tactics = tactic.split(",").map((t) => t.trim().toLowerCase().replace(/\s+/g, "-"));
|
||||
for (const t of tactics) {
|
||||
if (!techniquesByTactic[t]) techniquesByTactic[t] = [];
|
||||
techniquesByTactic[t].push(tech);
|
||||
}
|
||||
}
|
||||
|
||||
// Sort tactics by kill chain order
|
||||
const orderedTactics = TACTICS_ORDER.filter((t) => techniquesByTactic[t]);
|
||||
const unknownTactics = Object.keys(techniquesByTactic).filter(
|
||||
(t) => !TACTICS_ORDER.includes(t)
|
||||
);
|
||||
const allTactics = [...orderedTactics, ...unknownTactics];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Back Button */}
|
||||
<button
|
||||
onClick={() => navigate("/threat-actors")}
|
||||
className="flex items-center gap-1.5 text-sm text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Back to Threat Actors
|
||||
</button>
|
||||
|
||||
{/* ── SECTION 1: Header ──────────────────────────────────────── */}
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Crosshair className="h-7 w-7 text-purple-400" />
|
||||
<h1 className="text-2xl font-bold text-white">{actor.name}</h1>
|
||||
{actor.mitre_id && (
|
||||
<span className="rounded-full border border-purple-500/30 bg-purple-900/50 px-2.5 py-0.5 text-xs font-mono text-purple-400">
|
||||
{actor.mitre_id}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Aliases */}
|
||||
{actor.aliases && actor.aliases.length > 0 && (
|
||||
<div className="mt-2 flex flex-wrap gap-1.5">
|
||||
{actor.aliases.map((alias, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="rounded-full border border-gray-700 bg-gray-800 px-2 py-0.5 text-xs text-gray-400"
|
||||
>
|
||||
{alias}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* MITRE link */}
|
||||
{actor.mitre_url && (
|
||||
<a
|
||||
href={actor.mitre_url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="flex items-center gap-1.5 rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
<ExternalLink className="h-3.5 w-3.5" />
|
||||
MITRE ATT&CK
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Meta badges */}
|
||||
<div className="mt-4 flex flex-wrap items-center gap-3">
|
||||
{actor.country && (
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full border border-gray-700 bg-gray-800 px-3 py-1 text-xs text-gray-300">
|
||||
<Globe className="h-3.5 w-3.5 text-gray-500" />
|
||||
{actor.country}
|
||||
</span>
|
||||
)}
|
||||
{actor.motivation && (
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full border border-purple-500/30 bg-purple-900/50 px-3 py-1 text-xs text-purple-400">
|
||||
<Target className="h-3.5 w-3.5" />
|
||||
{actor.motivation}
|
||||
</span>
|
||||
)}
|
||||
{actor.sophistication && (
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full border border-cyan-500/30 bg-cyan-900/50 px-3 py-1 text-xs text-cyan-400">
|
||||
{actor.sophistication}
|
||||
</span>
|
||||
)}
|
||||
{actor.first_seen && (
|
||||
<span className="text-xs text-gray-500">
|
||||
First seen: {actor.first_seen}
|
||||
</span>
|
||||
)}
|
||||
{actor.last_seen && (
|
||||
<span className="text-xs text-gray-500">
|
||||
Last seen: {actor.last_seen}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Target sectors */}
|
||||
{actor.target_sectors && actor.target_sectors.length > 0 && (
|
||||
<div className="mt-3 flex items-center gap-2">
|
||||
<Target className="h-4 w-4 text-gray-600 shrink-0" />
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{actor.target_sectors.map((s, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="rounded-full border border-gray-700 bg-gray-800 px-2 py-0.5 text-[11px] text-gray-400"
|
||||
>
|
||||
{s}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── SECTION 2: Description ─────────────────────────────────── */}
|
||||
{actor.description && (
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-500">
|
||||
Description
|
||||
</h2>
|
||||
<p className="text-sm leading-relaxed text-gray-300 whitespace-pre-line">
|
||||
{actor.description}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── SECTION 3: Coverage Overview ───────────────────────────── */}
|
||||
{coverage && (
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gray-500">
|
||||
Coverage Overview
|
||||
</h2>
|
||||
<div className="grid gap-4 sm:grid-cols-4">
|
||||
<div className="rounded-lg border border-gray-700 bg-gray-800/50 p-4 text-center">
|
||||
<p className="text-3xl font-bold text-white">{coverage.total_techniques}</p>
|
||||
<p className="text-xs text-gray-400">Total Techniques</p>
|
||||
</div>
|
||||
<div className="rounded-lg border border-gray-700 bg-gray-800/50 p-4 text-center">
|
||||
<p className="text-3xl font-bold text-green-400">{coverage.covered}</p>
|
||||
<p className="text-xs text-gray-400">Covered</p>
|
||||
</div>
|
||||
<div className="rounded-lg border border-gray-700 bg-gray-800/50 p-4 text-center">
|
||||
<p className="text-3xl font-bold text-red-400">
|
||||
{coverage.total_techniques - coverage.covered}
|
||||
</p>
|
||||
<p className="text-xs text-gray-400">Gaps</p>
|
||||
</div>
|
||||
<div className="rounded-lg border border-gray-700 bg-gray-800/50 p-4 text-center">
|
||||
<p className={`text-3xl font-bold ${
|
||||
coverage.coverage_pct >= 80 ? "text-green-400" :
|
||||
coverage.coverage_pct >= 50 ? "text-yellow-400" : "text-red-400"
|
||||
}`}>
|
||||
{coverage.coverage_pct}%
|
||||
</p>
|
||||
<p className="text-xs text-gray-400">Coverage</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Breakdown bar */}
|
||||
{coverage.total_techniques > 0 && (
|
||||
<div className="mt-4">
|
||||
<div className="flex h-3 overflow-hidden rounded-full bg-gray-800">
|
||||
{coverage.breakdown.validated && (
|
||||
<div
|
||||
className="bg-green-500 transition-all"
|
||||
style={{
|
||||
width: `${(coverage.breakdown.validated / coverage.total_techniques) * 100}%`,
|
||||
}}
|
||||
title={`Validated: ${coverage.breakdown.validated}`}
|
||||
/>
|
||||
)}
|
||||
{coverage.breakdown.partial && (
|
||||
<div
|
||||
className="bg-yellow-500 transition-all"
|
||||
style={{
|
||||
width: `${(coverage.breakdown.partial / coverage.total_techniques) * 100}%`,
|
||||
}}
|
||||
title={`Partial: ${coverage.breakdown.partial}`}
|
||||
/>
|
||||
)}
|
||||
{coverage.breakdown.in_progress && (
|
||||
<div
|
||||
className="bg-blue-500 transition-all"
|
||||
style={{
|
||||
width: `${(coverage.breakdown.in_progress / coverage.total_techniques) * 100}%`,
|
||||
}}
|
||||
title={`In Progress: ${coverage.breakdown.in_progress}`}
|
||||
/>
|
||||
)}
|
||||
{coverage.breakdown.not_covered && (
|
||||
<div
|
||||
className="bg-red-500/70 transition-all"
|
||||
style={{
|
||||
width: `${(coverage.breakdown.not_covered / coverage.total_techniques) * 100}%`,
|
||||
}}
|
||||
title={`Not Covered: ${coverage.breakdown.not_covered}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-2 flex flex-wrap gap-4 text-xs text-gray-400">
|
||||
{Object.entries(coverage.breakdown).map(([status, count]) => (
|
||||
<span key={status} className="flex items-center gap-1.5">
|
||||
{statusIcon(status)}
|
||||
{statusLabel(status)}: {count}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── SECTION 4: Technique Heatmap ───────────────────────────── */}
|
||||
{allTactics.length > 0 && (
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gray-500">
|
||||
Technique Heatmap
|
||||
</h2>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="mb-4 flex flex-wrap gap-3 text-xs">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className="h-3 w-3 rounded bg-green-500/80" /> Validated
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className="h-3 w-3 rounded bg-yellow-500/80" /> Partial
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className="h-3 w-3 rounded bg-blue-500/60" /> In Progress
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className="h-3 w-3 rounded bg-red-500/70" /> Not Covered
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className="h-3 w-3 rounded bg-gray-700/50" /> Not Evaluated
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Heatmap grid — one column per tactic */}
|
||||
<div className="overflow-x-auto">
|
||||
<div className="inline-flex gap-2 min-w-max">
|
||||
{allTactics.map((tactic) => {
|
||||
const techs = techniquesByTactic[tactic] || [];
|
||||
return (
|
||||
<div key={tactic} className="flex flex-col gap-1" style={{ minWidth: 120 }}>
|
||||
{/* Tactic header */}
|
||||
<div className="rounded bg-gray-800 px-2 py-1.5 text-center">
|
||||
<span className="text-[10px] font-semibold uppercase tracking-wide text-gray-400">
|
||||
{tactic.replace(/-/g, " ")}
|
||||
</span>
|
||||
<span className="ml-1 text-[10px] text-gray-600">({techs.length})</span>
|
||||
</div>
|
||||
|
||||
{/* Technique cells */}
|
||||
{techs.map((tech) => (
|
||||
<button
|
||||
key={tech.technique_id}
|
||||
onClick={() => navigate(`/techniques/${tech.mitre_id}`)}
|
||||
className={`rounded border p-1.5 text-left transition-all hover:opacity-80 ${statusCellColor(tech.status_global)}`}
|
||||
title={`${tech.mitre_id}: ${tech.name} (${statusLabel(tech.status_global)})`}
|
||||
>
|
||||
<span className="block truncate text-[10px] font-mono text-white/90">
|
||||
{tech.mitre_id}
|
||||
</span>
|
||||
<span className="block truncate text-[9px] text-white/60">
|
||||
{tech.name}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── SECTION 5: Gap Analysis ────────────────────────────────── */}
|
||||
{gaps && gaps.gaps.length > 0 && (
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<h2 className="mb-4 flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-gray-500">
|
||||
<AlertTriangle className="h-4 w-4 text-orange-400" />
|
||||
Coverage Gap Analysis ({gaps.total_gaps} gaps)
|
||||
</h2>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-800">
|
||||
<th className="pb-3 pr-4 font-medium text-gray-400">Technique</th>
|
||||
<th className="pb-3 px-4 font-medium text-gray-400">Tactic</th>
|
||||
<th className="pb-3 px-4 font-medium text-gray-400">Status</th>
|
||||
<th className="pb-3 px-4 font-medium text-gray-400">Templates</th>
|
||||
<th className="pb-3 px-4 font-medium text-gray-400">Tests</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{gaps.gaps.map((gap: GapItem) => (
|
||||
<tr
|
||||
key={gap.technique_id}
|
||||
className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors cursor-pointer"
|
||||
onClick={() => navigate(`/techniques/${gap.mitre_id}`)}
|
||||
>
|
||||
<td className="py-2.5 pr-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-mono text-xs text-cyan-400">{gap.mitre_id}</span>
|
||||
<span className="truncate text-gray-300 text-xs max-w-[200px]">
|
||||
{gap.name}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-2.5 px-4 text-xs text-gray-400">
|
||||
{gap.tactic || "-"}
|
||||
</td>
|
||||
<td className="py-2.5 px-4">
|
||||
<span className="flex items-center gap-1.5 text-xs">
|
||||
{statusIcon(gap.status_global)}
|
||||
{statusLabel(gap.status_global)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-2.5 px-4">
|
||||
{gap.has_templates ? (
|
||||
<span className="inline-flex items-center gap-1 text-xs text-green-400">
|
||||
<BookOpen className="h-3.5 w-3.5" />
|
||||
{gap.available_templates}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-xs text-gray-600">0</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-2.5 px-4">
|
||||
{gap.existing_tests > 0 ? (
|
||||
<span className="inline-flex items-center gap-1 text-xs text-blue-400">
|
||||
<FlaskConical className="h-3.5 w-3.5" />
|
||||
{gap.existing_tests}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-xs text-gray-600">0</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── SECTION 6: All Techniques List ─────────────────────────── */}
|
||||
{actor.techniques.length > 0 && (
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gray-500">
|
||||
All Techniques ({actor.techniques.length})
|
||||
</h2>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-800">
|
||||
<th className="pb-3 pr-4 font-medium text-gray-400">ID</th>
|
||||
<th className="pb-3 px-4 font-medium text-gray-400">Name</th>
|
||||
<th className="pb-3 px-4 font-medium text-gray-400">Tactic</th>
|
||||
<th className="pb-3 px-4 font-medium text-gray-400">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{actor.techniques.map((tech: ThreatActorTechnique) => (
|
||||
<tr
|
||||
key={tech.technique_id}
|
||||
className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors cursor-pointer"
|
||||
onClick={() => navigate(`/techniques/${tech.mitre_id}`)}
|
||||
>
|
||||
<td className="py-2.5 pr-4 font-mono text-xs text-cyan-400">
|
||||
{tech.mitre_id}
|
||||
</td>
|
||||
<td className="py-2.5 px-4 text-xs text-gray-300 truncate max-w-[250px]">
|
||||
{tech.name}
|
||||
</td>
|
||||
<td className="py-2.5 px-4 text-xs text-gray-400">
|
||||
{tech.tactic || "-"}
|
||||
</td>
|
||||
<td className="py-2.5 px-4">
|
||||
<span className="flex items-center gap-1.5 text-xs">
|
||||
{statusIcon(tech.status_global)}
|
||||
{statusLabel(tech.status_global)}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── References ─────────────────────────────────────────────── */}
|
||||
{actor.references && actor.references.length > 0 && (
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
|
||||
<h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-500">
|
||||
References
|
||||
</h2>
|
||||
<ul className="space-y-1.5">
|
||||
{actor.references.map((ref, i) => (
|
||||
<li key={i} className="text-xs">
|
||||
{ref.url ? (
|
||||
<a
|
||||
href={ref.url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-cyan-400 hover:text-cyan-300 hover:underline"
|
||||
>
|
||||
{ref.source || ref.url}
|
||||
</a>
|
||||
) : (
|
||||
<span className="text-gray-400">{ref.source}</span>
|
||||
)}
|
||||
{ref.description && (
|
||||
<span className="ml-2 text-gray-500">{ref.description}</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user