Create src/components/ResearchSpace.tsx

src/components/ResearchSpace.tsx

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