refactor: Création de nouveaux composants / update formulaire de

création de classe (#2)

Front-End/src/components/Structure/Planning/DraggableSpeciality.js

@@ -0,0 +1,38 @@
+import { useDrag } from 'react-dnd';
+
+const DraggableSpeciality = ({ specialite }) => {
+  const [{ isDragging }, drag] = useDrag(() => ({
+    type: 'SPECIALITY',
+    item: { id: specialite.id, 
+            name: specialite.nom, 
+            color: specialite.codeCouleur,
+            teachers: specialite.teachers,
+            duree: specialite.duree },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  }));
+
+  const isColorDark = (color) => {
+    const r = parseInt(color.slice(1, 3), 16);
+    const g = parseInt(color.slice(3, 5), 16);
+    const b = parseInt(color.slice(5, 7), 16);
+    return ((r * 0.299 + g * 0.587 + b * 0.114) < 150);
+  };
+
+  return (
+    <span
+      ref={drag}
+      className="speciality-tag p-2 m-1 rounded cursor-pointer"
+      style={{
+        backgroundColor: specialite.codeCouleur,
+        color: isColorDark(specialite.codeCouleur) ? 'white' : 'black',
+        opacity: isDragging ? 0.5 : 1,
+      }}
+    >
+      {specialite.nom} ({specialite.teachers.join(', ')})
+    </span>
+  );
+};
+
+export default DraggableSpeciality;