Analysis Page

src/components/Analysis/SourcesChart.tsx

@@ -0,0 +1,85 @@
+import { PieChart, Pie, Cell, ResponsiveContainer, Legend } from 'recharts';
+import { Lightbulb } from 'lucide-react';
+
+const data = [
+  { name: 'Consumer Health Giants', value: 40, color: '#6B8FE8' },
+  { name: 'Mainstream Media Sections', value: 30, color: '#4E73DF' },
+  { name: 'Elite Medical Journals', value: 20, color: '#2E5BC7' },
+  { name: 'Specialty Platforms', value: 10, color: '#FDB91A' },
+  { name: 'Professional/Academic Crossovers', value: 3, color: '#EF5350' },
+];
+
+const SourcesChart = () => {
+  return (
+    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
+      <h2 className="text-2xl font-semibold text-gray-900 mb-8">
+        AI Frequently Cited Sources in Healthcare
+      </h2>
+      
+      <div className="grid md:grid-cols-2 gap-8 items-center">
+        <div className="h-80 flex items-center justify-center">
+          <ResponsiveContainer width="100%" height="100%">
+            <PieChart>
+              <Pie
+                data={data}
+                cx="50%"
+                cy="50%"
+                innerRadius={80}
+                outerRadius={140}
+                paddingAngle={2}
+                dataKey="value"
+              >
+                {data.map((entry, index) => (
+                  <Cell key={`cell-${index}`} fill={entry.color} />
+                ))}
+              </Pie>
+            </PieChart>
+          </ResponsiveContainer>
+        </div>
+
+        <div className="space-y-3">
+          {data.map((item, index) => (
+            <div
+              key={index}
+              className="flex items-center gap-4 p-4 rounded-xl bg-gray-50 hover:bg-gray-100 transition-colors"
+            >
+              <div
+                className="w-3 h-3 rounded-full flex-shrink-0"
+                style={{ backgroundColor: item.color }}
+              />
+              <div className="flex-1">
+                <span className="text-2xl font-bold text-gray-900">
+                  {item.value}%
+                </span>
+                <span className="ml-2 text-gray-600">{item.name}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-8 bg-blue-50 rounded-xl p-6">
+        <div className="flex items-start gap-3">
+          <Lightbulb className="w-6 h-6 text-blue-600 flex-shrink-0 mt-0.5" />
+          <div>
+            <h3 className="font-semibold text-gray-900 mb-2">
+              How AI and LLMs Choose Their Sources
+            </h3>
+            <p className="text-gray-700 leading-relaxed">
+              Our analysis reveals distinct patterns in how leading AIs source and prioritize 
+              industry information. For example, ChatGPT leans heavily on user-generated content, 
+              while Google's AI Overviews favors authoritative tech review sites. Across the 
+              board, backlink quality plays a crucial role, with...{' '}
+              <button className="text-blue-600 font-medium hover:text-blue-700">
+                read more
+              </button>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SourcesChart;
+