File size: 2,957 Bytes
3f8fa85 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | import React from 'react';
import { FolderOpen, Calendar, ChevronRight, FileText, Plus } from 'lucide-react';
export const ResearchSpace = ({ projects, onSelectProject, t }) => {
return (
<div className="space-y-6">
<div className="flex justify-between items-center">
<div>
<h2 className="text-2xl font-bold text-slate-900">{t.navProjects || "المشاريع البحثية"}</h2>
<p className="text-slate-500 text-sm">إدارة وتنظيم أبحاثك في التراث المريدي</p>
</div>
<button className="flex items-center gap-2 bg-emerald-800 text-white px-4 py-2 rounded-xl text-sm hover:bg-emerald-700 transition">
<Plus className="w-4 h-4" />
مشروع جديد
</button>
</div>
{projects.length === 0 ? (
<div className="bg-white border-2 border-dashed border-slate-200 rounded-3xl p-12 text-center">
<div className="bg-slate-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<FolderOpen className="w-8 h-8 text-slate-300" />
</div>
<h3 className="text-lg font-bold text-slate-900 mb-2">لا توجد مشاريع نشطة</h3>
<p className="text-slate-500 max-w-sm mx-auto mb-6">
ابدأ بالبحث في "الباحث الذكي" وقم بتحويل محادثاتك إلى مشاريع بحثية منظمة.
</p>
</div>
) : (
<div className="grid gap-4">
{projects.map((project) => (
<div
key={project.id}
onClick={() => onSelectProject(project)}
className="bg-white p-5 rounded-2xl border border-slate-200 hover:border-emerald-500 cursor-pointer transition-all group flex items-center justify-between"
>
<div className="flex items-center gap-4">
<div className="w-12 h-12 bg-emerald-50 rounded-xl flex items-center justify-center text-emerald-700 group-hover:bg-emerald-600 group-hover:text-white transition-colors">
<FileText className="w-6 h-6" />
</div>
<div>
<h3 className="font-bold text-slate-900">{project.name}</h3>
<div className="flex items-center gap-3 text-xs text-slate-400 mt-1">
<span className="flex items-center gap-1">
<Calendar className="w-3 h-3" />
{new Date(project.createdAt).toLocaleDateString(undefined, { dateStyle: 'medium' })}
</span>
<span>•</span>
<span>{project.sources.length} مصادر</span>
</div>
</div>
</div>
<ChevronRight className="w-5 h-5 text-slate-300 group-hover:text-emerald-600 transition-colors" />
</div>
))}
</div>
)}
</div>
);
}; |