File size: 4,011 Bytes
a648fd4 | 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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | import React, { useState } from 'react';
import { Book, Search, Filter, Plus, Info, CheckCircle2 } from 'lucide-react';
export const Library = ({ sources, onAddToProject, activeProjectId, projects, t }) => {
const [searchTerm, setSearchTerm] = useState('');
const [filter, setFilter] = useState('all');
const filteredSources = sources.filter(source => {
const matchesSearch = source.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
source.author.toLowerCase().includes(searchTerm.toLowerCase());
const matchesFilter = filter === 'all' || source.category === filter;
return matchesSearch && matchesFilter;
});
return (
<div className="space-y-8">
{/* Header & Search */}
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
<div>
<h2 className="text-2xl font-bold text-slate-900">{t.navLibrary}</h2>
<p className="text-slate-500 text-sm">تصفح المصادر والمراجع المتاحة في المكتبة</p>
</div>
<div className="flex gap-3">
<div className="relative">
<Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
<input
type="text"
placeholder="بحث في الكتب..."
className="pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-emerald-500 outline-none w-64"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
<select
className="bg-slate-50 border border-slate-200 rounded-xl px-4 py-2 text-sm focus:ring-2 focus:ring-emerald-500 outline-none"
value={filter}
onChange={(e) => setFilter(e.target.value)}
>
<option value="all">كل التصنيفات</option>
<option value="khidma">الخدمة والآداب</option>
<option value="tawhid">التوحيد</option>
<option value="tasawwuf">التصوف العرفاني</option>
</select>
</div>
</div>
{/* Grid of Books */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{filteredSources.map((source) => (
<div key={source.id} className="bg-white p-6 rounded-2xl border border-slate-200 hover:border-emerald-500 transition-all group shadow-sm">
<div className="flex justify-between items-start mb-4">
<div className="p-3 bg-emerald-50 rounded-lg group-hover:bg-emerald-600 transition-colors">
<Book className="w-6 h-6 text-emerald-700 group-hover:text-white" />
</div>
<span className="text-[10px] font-bold uppercase tracking-wider bg-slate-100 px-2 py-1 rounded text-slate-500">
{source.category}
</span>
</div>
<h3 className="text-lg font-bold text-slate-900 mb-1">{source.title}</h3>
<p className="text-emerald-700 text-sm font-medium mb-4">{source.author}</p>
<div className="flex items-center justify-between pt-4 border-t border-slate-50">
<button className="flex items-center gap-1 text-slate-400 hover:text-emerald-600 transition">
<Info className="w-4 h-4" />
<span className="text-xs">التفاصيل</span>
</button>
<button
onClick={() => onAddToProject(source.id)}
className="flex items-center gap-2 bg-slate-900 text-white px-4 py-2 rounded-lg text-xs hover:bg-emerald-700 transition"
>
<Plus className="w-3 h-3" />
إضافة للمشروع
</button>
</div>
</div>
))}
</div>
</div>
);
}; |