86 أسطر
3.0 KiB
TypeScript
86 أسطر
3.0 KiB
TypeScript
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;
|
|
|