34 lines
1.4 KiB
TypeScript
34 lines
1.4 KiB
TypeScript
|
export function Citation({ id, index }: { id: string; index: number }) {
|
||
|
|
return (
|
||
|
|
<sup id={`cite-ref-${id}`} className="ml-0.5">
|
||
|
|
<a
|
||
|
|
href={`#cite-note-${id}`}
|
||
|
|
className="text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors font-mono text-[10px] no-underline"
|
||
|
|
>
|
||
|
|
[{index}]
|
||
|
|
</a>
|
||
|
|
</sup>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Bibliography({ items, children }: { items?: { id: string; content: React.ReactNode }[]; children?: React.ReactNode }) {
|
||
|
|
if (!items && !children) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="mt-12 pt-8 border-t border-zinc-200 dark:border-zinc-800">
|
||
|
|
<h3 className="text-sm font-bold uppercase tracking-wider text-zinc-900 dark:text-zinc-100 mb-4">References</h3>
|
||
|
|
<ol className="list-decimal pl-4 space-y-2 text-sm text-zinc-600 dark:text-zinc-400">
|
||
|
|
{Array.isArray(items) && items.map((item, i) => (
|
||
|
|
<li key={item.id} id={`cite-note-${item.id}`}>
|
||
|
|
{item.content}
|
||
|
|
<a href={`#cite-ref-${item.id}`} className="ml-2 hover:text-zinc-900 dark:hover:text-zinc-100">
|
||
|
|
↩
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
{!Array.isArray(items) && children}
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|