feat: Bilan de compétence d'un élève [#16]

Front-End/src/components/Grades/Attendance.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export default function Attendance({ absences }) {
+  return (
+    <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+      <h2 className="text-xl font-semibold mb-4">Présence et assiduité</h2>
+      <ol className="relative border-l border-emerald-200">
+        {absences.map((absence, idx) => (
+          <li key={idx} className="mb-6 ml-4">
+            <div className="absolute w-3 h-3 bg-emerald-400 rounded-full mt-1.5 -left-1.5 border border-white" />
+            <time className="mb-1 text-xs font-normal leading-none text-gray-400">
+              {absence.date}
+            </time>
+            <div className="flex items-center gap-2">
+              <span className="font-medium">{absence.type}</span>
+              <span
+                className={`text-xs px-2 py-1 rounded ${absence.justified ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700'}`}
+              >
+                {absence.justified ? 'Justifiée' : 'Non justifiée'}
+              </span>
+            </div>
+            <div className="text-sm text-gray-500">{absence.reason}</div>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}