Initial commit

components/mdx/Citation.tsx

@@ -0,0 +1,33 @@
+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>
+    );
+}