disclosure-bureau/web/components/fm/external-sources.tsx

34 lines
1.4 KiB
TypeScript

import { ExternalLink } from "lucide-react";
import { FmConfidence } from "./badges";
import type { ExternalSource } from "@/lib/fm-types";
export function FmExternalSources({ sources }: { sources?: ExternalSource[] }) {
if (!sources || sources.length === 0) return null;
return (
<ul className="space-y-2 mt-1">
{sources.map((s, i) => (
<li key={i} className="border-l-2 border-[rgba(0,255,156,0.32)] pl-3 py-1">
<a
href={s.url}
target="_blank"
rel="noopener noreferrer"
className="text-[#7fdbff] hover:text-[#00ff9c] inline-flex items-start gap-1 text-sm font-medium"
>
<span>{s.title || s.url}</span>
<ExternalLink size={12} className="shrink-0 mt-0.5" />
</a>
<div className="text-[10px] text-[#8896aa] mt-1 flex items-center gap-2 font-mono">
{s.publisher && <span>{s.publisher}</span>}
{s.reliability_band && <FmConfidence band={s.reliability_band} />}
{s.accessed_at && <span className="text-[#5a6678]">· {s.accessed_at.split("T")[0]}</span>}
</div>
{s.key_facts && s.key_facts.length > 0 && (
<ul className="mt-1 text-xs text-[#c8d4e6] list-disc list-inside space-y-0.5">
{s.key_facts.slice(0, 6).map((k, j) => <li key={j}>{k}</li>)}
</ul>
)}
</li>
))}
</ul>
);
}