function RoomSelectorDropdown({ options, selectedValue, onSelectChange }) { return /*#__PURE__*/ React.createElement("select", { id: "room-select", name: "room", className: "mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500", value: selectedValue, onChange: onSelectChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, options.map((option, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: option.value, __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, option.label))); } function RoomSelectorDropdownStory() { const options = [ { value: 'room1', label: 'Room 1' }, { value: 'room2', label: 'Room 2' }, { value: 'room3', label: 'Room 3' } ]; const [selectedRoom, setSelectedRoom] = React.useState(options[0].value); const handleRoomChange = (event)=>{ setSelectedRoom(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RoomSelectorDropdown, { options: options, selectedValue: selectedRoom, onSelectChange: handleRoomChange, __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this })); } function MainComponent() { const [studentsPerRoom, setStudentsPerRoom] = React.useState(Array.from({ length: 100 }).fill([])); const [selectedRoom, setSelectedRoom] = React.useState('0'); const [studentName, setStudentName] = React.useState(''); const [showRoomMembers, setShowRoomMembers] = React.useState(false); const registerStudent = ()=>{ const roomIndex = parseInt(selectedRoom); if (studentsPerRoom[roomIndex].length < 4) { const newStudentsPerRoom = [ ...studentsPerRoom ]; newStudentsPerRoom[roomIndex] = [ ...newStudentsPerRoom[roomIndex], studentName ]; setStudentsPerRoom(newStudentsPerRoom); setStudentName(''); } }; const deleteStudent = ()=>{ const roomIndex = parseInt(selectedRoom); if (studentsPerRoom[roomIndex].length > 0) { const newStudentsPerRoom = [ ...studentsPerRoom ]; newStudentsPerRoom[roomIndex].pop(); setStudentsPerRoom(newStudentsPerRoom); } }; const viewRoomMembers = ()=>{ setShowRoomMembers(!showRoomMembers); }; const vacanciesAvailable = studentsPerRoom.some((students)=>students.length < 4); const roomOptions = studentsPerRoom.map((students, index)=>({ value: index.toString(), label: `Room ${index + 1} - Students: ${students.length}` })); const handleRoomChange = (event)=>{ setSelectedRoom(event.target.value); setShowRoomMembers(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md w-full space-y-4", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(RoomSelectorDropdown, { options: roomOptions, selectedValue: selectedRoom, onSelectChange: handleRoomChange, __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: studentName, onChange: (e)=>setStudentName(e.target.value), className: "mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500", placeholder: "Student's Name", name: "studentName", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: registerStudent, className: "w-full px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition ease-in-out duration-150", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Register"), /*#__PURE__*/ React.createElement("button", { onClick: deleteStudent, className: "w-full px-4 py-2 bg-red-500 text-white rounded hover:bg-red-700 transition ease-in-out duration-150", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "Delete"), /*#__PURE__*/ React.createElement("button", { onClick: viewRoomMembers, className: "w-full px-4 py-2 bg-green-500 text-white rounded hover:bg-green-700 transition ease-in-out duration-150", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, showRoomMembers ? 'Hide Members' : 'Show Members'), showRoomMembers && /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white rounded-md shadow", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, studentsPerRoom[parseInt(selectedRoom)].map((name, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-sm text-gray-800", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, name)))), /*#__PURE__*/ React.createElement("div", { className: "text-center text-sm font-semibold text-[#121212]", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, vacanciesAvailable ? 'Vacancies Available' : 'No Vacancies Available'))); }