skills

src/components/aeo/SourcesList.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import React from 'react';
+import type { Source } from "@/lib/types";
+
+type Props = {
+    sources: Source[];
+    title?: string;
+};
+
+export function SourcesList({ sources, title = "Sources & References" }: Props) {
+    if (!sources?.length) return null;
+
+    return (
+        <section className="rounded-xl border border-gray-100 bg-gray-50/50 p-6 my-8">
+            <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
+            <ol className="space-y-2 list-decimal list-inside">
+                {sources.map((source, index) => (
+                    <li key={index} className="text-sm text-gray-700">
+                        <cite className="not-italic">
+                            <a
+                                href={source.url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-blue-600 hover:text-blue-800 hover:underline"
+                            >
+                                {source.name}
+                            </a>
+                        </cite>
+                        {source.accessDate && (
+                            <span className="text-gray-500 ml-2">
+                                (accessed {source.accessDate})
+                            </span>
+                        )}
+                    </li>
+                ))}
+            </ol>
+        </section>
+    );
+}