function MainComponent() { const demoNames = `Aisha Khan Fatima El Amrani Zara Patel Hassan Mahmoud Alejandro García Mei Lin Youssef El Haddad Amara Okafor Priya Sharma Diego Morales Chen Wei Rania Abid Tarek Hassan Aya Nakamura Sofia Ivanova Arjun Reddy Isabella Costa Jamal Ahmed Kavita Patel Leila Habibi Mohamed El Sayed Akira Takahashi Lucia Fernández Ebrahim Al-Farsi Nina Popov`; const [students, setStudents] = useState([]); const [groupSize, setGroupSize] = useState(2); const [groups, setGroups] = useState([]); const [studentNames, setStudentNames] = useState(""); const [showPopup, setShowPopup] = useState(false); const [distribution, setDistribution] = useState(""); const [isDragging, setIsDragging] = useState(false); const [draggedStudent, setDraggedStudent] = useState(null); const [showDataInfo, setShowDataInfo] = useState(false); useEffect(()=>{ document.title = "Groepenmaker"; }, []); const handleDragStart = (e, groupIndex, studentIndex)=>{ setIsDragging(true); setDraggedStudent({ groupIndex, studentIndex }); e.dataTransfer.setData("text", JSON.stringify({ groupIndex, studentIndex })); }; const handleDragOver = (e)=>{ e.preventDefault(); e.currentTarget.classList.add("bg-blue-50"); }; const handleDragLeave = (e)=>{ e.currentTarget.classList.remove("bg-blue-50"); }; const handleDrop = (e, targetGroupIndex)=>{ e.preventDefault(); e.currentTarget.classList.remove("bg-blue-50"); setIsDragging(false); setDraggedStudent(null); const data = JSON.parse(e.dataTransfer.getData("text")); const { groupIndex: sourceGroupIndex, studentIndex } = data; if (sourceGroupIndex === targetGroupIndex) return; const newGroups = [ ...groups ]; const student = newGroups[sourceGroupIndex][studentIndex]; newGroups[sourceGroupIndex] = newGroups[sourceGroupIndex].filter((_, index)=>index !== studentIndex); newGroups[targetGroupIndex] = [ ...newGroups[targetGroupIndex], student ]; setGroups(newGroups); }; const addStudents = ()=>{ if (studentNames.trim()) { const newStudents = studentNames.split("\n").map((name)=>name.trim()).filter((name)=>name.length > 0); setStudents([ ...students, ...newStudents ]); setStudentNames(""); } }; const removeStudent = (index)=>{ setStudents(students.filter((_, i)=>i !== index)); }; const createGroups = ()=>{ let shuffled = [ ...students ].sort(()=>Math.random() - 0.5); const totalStudents = shuffled.length; const numberOfGroups = Math.ceil(totalStudents / groupSize); const baseGroupSize = Math.floor(totalStudents / numberOfGroups); const extraStudents = totalStudents % numberOfGroups; let result = []; let currentIndex = 0; for(let i = 0; i < numberOfGroups; i++){ const hasExtraStudent = i < extraStudents; const currentGroupSize = baseGroupSize + (hasExtraStudent ? 1 : 0); result.push(shuffled.slice(currentIndex, currentIndex + currentGroupSize)); currentIndex += currentGroupSize; } let distributionText = ""; if (result.length > 0) { const sizes = result.map((group)=>group.length); const uniqueSizes = [ ...new Set(sizes) ]; if (uniqueSizes.length === 1) { distributionText = `${result.length} groepen van ${uniqueSizes[0]} studenten`; } else { const sizeCount = {}; sizes.forEach((size)=>sizeCount[size] = (sizeCount[size] || 0) + 1); distributionText = Object.entries(sizeCount).map(([size, count])=>`${count} ${count === 1 ? "groep" : "groepen"} van ${size} studenten`).join(" en "); } } setDistribution(distributionText); setGroups(result); setShowPopup(true); }; const loadDemoNames = ()=>{ setStudentNames(demoNames); }; const clearAllStudents = ()=>{ setStudents([]); setGroups([]); setDistribution(""); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#143d2f] p-8", __source: { fileName: "", lineNumber: 150, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto bg-[#1d4a3c] rounded-lg shadow-md p-6 text-white", __source: { fileName: "", lineNumber: 151, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 152, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-2 text-center font-roboto", __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, "Groepenmaker"), /*#__PURE__*/ React.createElement("p", { className: "text-white text-center mb-4", __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }, "Data wordt alleen lokaal opgeslagen op je device en wordt verwijderd bij het sluiten van je browser."), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowDataInfo(true), className: "text-blue-300 hover:text-blue-100 font-semibold text-center w-full mb-6", __source: { fileName: "", lineNumber: 162, columnNumber: 11 }, __self: this }, "Klik hier om uitgebreider te lezen hoe er met data in deze tool wordt omgegaan."), showDataInfo && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 171, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1d4a3c] p-6 rounded-lg relative max-w-2xl text-white", __source: { fileName: "", lineNumber: 172, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowDataInfo(false), className: "absolute top-2 right-2 text-gray-300 hover:text-white", __source: { fileName: "", lineNumber: 173, columnNumber: 17 }, __self: this }, "×"), /*#__PURE__*/ React.createElement("div", { className: "text-left", __source: { fileName: "", lineNumber: 179, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("u", { __source: { fileName: "", lineNumber: 180, columnNumber: 19 }, __self: this }, "**Data verantwoording:**"), /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 181, columnNumber: 19 }, __self: this }), "1. De data is altijd tijdelijk. Wanneer je de pagina ververst of de browser sluit zijn alle namen verdwenen.", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 184, columnNumber: 19 }, __self: this }), "2. De data verlaat nooit jouw apparaat. Namen worden niet naar een server of database gestuurd.", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 187, columnNumber: 19 }, __self: this }), "3. De data is privé. Andere websites kunnen deze informatie niet bekijken.", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 190, columnNumber: 19 }, __self: this }), "4. De data is veilig. De data staat alleen in het tijdelijke geheugen van je apparaat."))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 198, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mb-4", __source: { fileName: "", lineNumber: 199, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: studentNames, onChange: (e)=>setStudentNames(e.target.value), placeholder: "Voer namen in (één naam per regel)", className: "flex-1 p-2 border rounded h-32 bg-white text-black", onKeyPress: (e)=>e.ctrlKey && e.key === "Enter" && addStudents(), __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 209, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: addStudents, className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 210, columnNumber: 17 }, __self: this }, "Toevoegen"), /*#__PURE__*/ React.createElement("button", { onClick: loadDemoNames, className: "bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600", __source: { fileName: "", lineNumber: 216, columnNumber: 17 }, __self: this }, "Demo Namen"), /*#__PURE__*/ React.createElement("button", { onClick: clearAllStudents, className: "bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600", __source: { fileName: "", lineNumber: 222, columnNumber: 17 }, __self: this }, "Alles Wissen"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4 mb-4", __source: { fileName: "", lineNumber: 231, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-semibold text-white", __source: { fileName: "", lineNumber: 232, columnNumber: 15 }, __self: this }, "Hoeveel leerlingen of studenten per groep?"), /*#__PURE__*/ React.createElement("input", { type: "number", min: "2", max: students.length, value: groupSize, onChange: (e)=>setGroupSize(Math.max(2, parseInt(e.target.value) || 2)), className: "w-20 p-2 border rounded bg-white text-black", __source: { fileName: "", lineNumber: 235, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: createGroups, disabled: students.length < 2, className: "bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 disabled:bg-gray-400", __source: { fileName: "", lineNumber: 245, columnNumber: 15 }, __self: this }, "Maak Groepen"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 255, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 256, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-3 text-white", __source: { fileName: "", lineNumber: 257, columnNumber: 15 }, __self: this }, "Lijst van leerlingen of studenten (", students.length, " studenten)"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 260, columnNumber: 15 }, __self: this }, students.map((student, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex justify-between items-center bg-white text-black p-3 rounded-lg shadow-sm border border-gray-100 hover:shadow-md transition-shadow", __source: { fileName: "", lineNumber: 262, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 266, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "w-6 h-6 flex items-center justify-center bg-gray-100 text-gray-600 rounded-full text-sm mr-3", __source: { fileName: "", lineNumber: 267, columnNumber: 23 }, __self: this }, index + 1), student), /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeStudent(index), className: "text-red-500 hover:text-red-700", __source: { fileName: "", lineNumber: 272, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 276, columnNumber: 23 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 283, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-3 text-white", __source: { fileName: "", lineNumber: 284, columnNumber: 15 }, __self: this }, "Groepen"), distribution && /*#__PURE__*/ React.createElement("p", { className: "text-white mb-4 text-sm", __source: { fileName: "", lineNumber: 286, columnNumber: 17 }, __self: this }, distribution), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 288, columnNumber: 15 }, __self: this }, groups.map((group, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `bg-white text-black p-4 rounded-xl shadow-md transition-all duration-200 border-2 ${isDragging ? "hover:bg-blue-50 hover:shadow-lg border-blue-200" : "border-gray-100"}`, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: (e)=>handleDrop(e, index), __source: { fileName: "", lineNumber: 290, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4 pb-2 border-b border-gray-200", __source: { fileName: "", lineNumber: 301, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 302, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "w-7 h-7 flex items-center justify-center bg-blue-100 text-blue-600 rounded-full font-bold mr-3", __source: { fileName: "", lineNumber: 303, columnNumber: 25 }, __self: this }, index + 1), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-800", __source: { fileName: "", lineNumber: 306, columnNumber: 25 }, __self: this }, "Groep ", index + 1)), /*#__PURE__*/ React.createElement("span", { className: "text-gray-500 text-sm", __source: { fileName: "", lineNumber: 310, columnNumber: 23 }, __self: this }, group.length, " ", group.length === 1 ? "student" : "studenten")), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 315, columnNumber: 21 }, __self: this }, group.map((student, studentIndex)=>/*#__PURE__*/ React.createElement("li", { key: studentIndex, draggable: true, onDragStart: (e)=>handleDragStart(e, index, studentIndex), className: `flex items-center p-2 rounded-lg transition-colors ${draggedStudent?.groupIndex === index && draggedStudent?.studentIndex === studentIndex ? "bg-blue-100" : "hover:bg-gray-50"}`, __source: { fileName: "", lineNumber: 317, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "w-6 h-6 flex items-center justify-center bg-gray-100 text-gray-600 rounded-full text-sm mr-3", __source: { fileName: "", lineNumber: 330, columnNumber: 27 }, __self: this }, studentIndex + 1), /*#__PURE__*/ React.createElement("span", { className: "cursor-move", __source: { fileName: "", lineNumber: 333, columnNumber: 27 }, __self: this }, student)))))))))), showPopup && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 345, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1d4a3c] p-8 rounded-lg w-full h-full overflow-auto relative text-white", __source: { fileName: "", lineNumber: 346, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowPopup(false), className: "absolute top-4 right-4 text-white hover:text-gray-200", __source: { fileName: "", lineNumber: 347, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-2xl", __source: { fileName: "", lineNumber: 351, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold text-center mb-4 font-roboto", __source: { fileName: "", lineNumber: 354, columnNumber: 15 }, __self: this }, "Groepsindeling"), distribution && /*#__PURE__*/ React.createElement("p", { className: "text-center text-white mb-8 text-xl", __source: { fileName: "", lineNumber: 359, columnNumber: 17 }, __self: this }, distribution), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto px-4", __source: { fileName: "", lineNumber: 364, columnNumber: 15 }, __self: this }, groups.map((group, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `bg-white text-black p-6 rounded-xl shadow-lg transition-all duration-200 border-2 ${isDragging ? "hover:bg-blue-50 hover:shadow-xl border-blue-200" : "border-gray-100"}`, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: (e)=>handleDrop(e, index), __source: { fileName: "", lineNumber: 366, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-6 pb-3 border-b border-gray-200", __source: { fileName: "", lineNumber: 377, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 378, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "w-8 h-8 flex items-center justify-center bg-blue-100 text-blue-600 rounded-full font-bold mr-3", __source: { fileName: "", lineNumber: 379, columnNumber: 25 }, __self: this }, index + 1), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold text-gray-800", __source: { fileName: "", lineNumber: 382, columnNumber: 25 }, __self: this }, "Groep ", index + 1)), /*#__PURE__*/ React.createElement("span", { className: "text-gray-500 text-sm", __source: { fileName: "", lineNumber: 386, columnNumber: 23 }, __self: this }, group.length, " ", group.length === 1 ? "student" : "studenten")), /*#__PURE__*/ React.createElement("ul", { className: "space-y-3", __source: { fileName: "", lineNumber: 391, columnNumber: 21 }, __self: this }, group.map((student, studentIndex)=>/*#__PURE__*/ React.createElement("li", { key: studentIndex, draggable: true, onDragStart: (e)=>handleDragStart(e, index, studentIndex), className: `flex items-center text-lg p-3 rounded-lg transition-colors ${draggedStudent?.groupIndex === index && draggedStudent?.studentIndex === studentIndex ? "bg-blue-100" : "hover:bg-gray-50"}`, __source: { fileName: "", lineNumber: 393, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "w-6 h-6 flex items-center justify-center bg-gray-100 text-gray-600 rounded-full text-sm mr-3", __source: { fileName: "", lineNumber: 406, columnNumber: 27 }, __self: this }, studentIndex + 1), /*#__PURE__*/ React.createElement("span", { className: "cursor-move", __source: { fileName: "", lineNumber: 409, columnNumber: 27 }, __self: this }, student))))))))))); }

Groepenmaker

Lijst van leerlingen of studenten (0 studenten)

Groepen