refactor: Refactoring de la section ClassSection

Front-End/src/components/Structure/Configuration/TeacherItem.js

@@ -0,0 +1,35 @@
+import { useDrag } from 'react-dnd';
+import React from 'react';
+
+const ItemTypes = {
+  TEACHER: 'teacher',
+};
+
+const TeacherItem = ({ teacher, isDraggable = true }) => {
+  const [{ isDragging }, drag] = useDrag(() => ({
+    type: ItemTypes.TEACHER,
+    item: { id: teacher.id, name: `${teacher.last_name} ${teacher.first_name}` },
+    collect: (monitor) => ({
+      isDragging: !!monitor.isDragging(),
+    }),
+    canDrag: () => isDraggable,
+  }), [isDraggable]);
+
+  return (
+    <div
+      ref={isDraggable ? drag : null}
+      className={`inline-block px-3 py-1 rounded-lg font-bold text-white text-center transition-transform duration-200 ease-in-out ${
+        isDragging ? 'opacity-30' : 'opacity-100'
+      } ${isDraggable ? 'cursor-grabbing hover:shadow-lg hover:scale-105' : ''}`}
+      style={{
+        backgroundColor: isDragging ? '#d1d5db' : isDraggable ? '#10b981' : '#a7f3d0', // Change background color based on dragging state and draggable state
+        border: isDraggable ? '1px solid #10b981' : '1px solid #a7f3d0', // Add a border
+        boxShadow: isDraggable ? '0 2px 4px rgba(0, 0, 0, 0.1)' : 'none' // Add a shadow if draggable
+      }}
+    >
+      {teacher.last_name} {teacher.first_name}
+    </div>
+  );
+};
+
+export default TeacherItem;