File size: 2,394 Bytes
7cc7aef a78483d 7cc7aef a78483d 7cc7aef |
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 |
import { useState } from 'react';
import ResourceList from './ResourceList';
const getIcon = (title) => {
const t = title.toLowerCase();
if (t.includes('cours')) return '📚';
if (t.includes('td')) return '✏️';
if (t.includes('tp')) return '🔧';
if (t.includes('projet')) return '🛠️';
if (t.includes('examen')) return '📝';
return '📁';
};
export default function SectionList({ module, sections }) {
const [activeSectionId, setActiveSectionId] = useState(
sections[0]?.$id || null
);
const activeSection = sections.find(s => s.$id === activeSectionId);
return (
<div>
{sections.length > 0 ? (
<>
<section className="content-section">
<div className="section-container">
<h2 className="section-title">Contenu du cours</h2>
<div className="content-grid">
{sections.map((sec) => (
<div
key={sec.$id}
className="content-card"
onClick={() => setActiveSectionId(sec.$id)}
>
<div className="card-header">
<div className="card-icon">{getIcon(sec.title)}</div>
<h3 className="card-title">{sec.title}</h3>
</div>
<p className="card-description">
Cliquez pour voir les documents et ressources
</p>
<span className="card-link">
Accéder →
</span>
</div>
))}
</div>
</div>
</section>
<section className="files-section" id="documents">
<div className="section-container">
<h2 className="section-title">
{activeSection ? activeSection.title : 'Documents'}
</h2>
{activeSectionId && (
<ResourceList
moduleId={module.$id}
sectionId={activeSectionId}
/>
)}
</div>
</section>
</>
) : (
<section className="content-section">
<div className="section-container">
<div className="error">Aucune section disponible.</div>
</div>
</section>
)}
</div>
);
} |