function MainComponent() { const [teamName, setTeamName] = React.useState(''); const [teamCounts, setTeamCounts] = React.useState({ ACC: 0, BigTen: 0, Big12: 0, Pac12: 0, SEC: 0 }); const [selectedTeams, setSelectedTeams] = React.useState([]); const [teams, setTeams] = React.useState([ { id: 101, name: 'Boston College', conference: 'ACC' }, { id: 102, name: 'Clemson', conference: 'ACC' }, { id: 103, name: 'Duke', conference: 'ACC' }, { id: 104, name: 'Florida State', conference: 'ACC' }, { id: 105, name: 'Georgia Tech', conference: 'ACC' }, { id: 106, name: 'Louisville', conference: 'ACC' }, { id: 107, name: 'Miami (FL)', conference: 'ACC' }, { id: 108, name: 'North Carolina', conference: 'ACC' }, { id: 109, name: 'NC State', conference: 'ACC' }, { id: 110, name: 'Pittsburgh', conference: 'ACC' }, { id: 111, name: 'Syracuse', conference: 'ACC' }, { id: 112, name: 'Virginia', conference: 'ACC' }, { id: 113, name: 'Virginia Tech', conference: 'ACC' }, { id: 114, name: 'Wake Forest', conference: 'ACC' }, { id: 115, name: 'Notre Dame', conference: 'ACC' } ]); const handleTeamNameChange = (event)=>{ setTeamName(event.target.value); }; const handleTeamNameSubmit = (event)=>{ event.preventDefault(); alert(`Team "${teamName}" created with the selected teams!`); }; const handleTeamSelection = (event, conference)=>{ const teamId = parseInt(event.target.value, 10); if (selectedTeams.includes(teamId)) { setTeamCounts((prevCounts)=>({ ...prevCounts, [conference]: prevCounts[conference] - 1 })); setSelectedTeams((prevSelected)=>prevSelected.filter((id)=>id !== teamId)); } else if (teamCounts[conference] < 2) { setTeamCounts((prevCounts)=>({ ...prevCounts, [conference]: prevCounts[conference] + 1 })); setSelectedTeams((prevSelected)=>[ ...prevSelected, teamId ]); } }; const renderDropdownForConference = (conference)=>{ const conferenceTeams = teams.filter((team)=>team.conference === conference).map((team)=>/*#__PURE__*/ React.createElement("option", { key: team.id, value: team.id, __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, team.name)); return /*#__PURE__*/ React.createElement("select", { value: selectedTeams.filter((id)=>teams.find((team)=>team.id === id)?.conference === conference), onChange: (event)=>handleTeamSelection(event, conference), multiple: true, size: "5", name: conference, className: "w-full p-2 border border-[#010101] rounded shadow mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, conferenceTeams); }; const totalSelectedTeams = selectedTeams.length; const isSubmitDisabled = teamName.trim() === '' || totalSelectedTeams !== 10; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 space-y-6", __source: { fileName: "", lineNumber: 77, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, "College Football Fantasy League"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleTeamNameSubmit, className: "w-full max-w-xl", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: teamName, onChange: handleTeamNameChange, placeholder: "Create a team name", required: true, name: "teamName", className: "w-full p-2 border border-[#010101] rounded shadow", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isSubmitDisabled, className: `w-full px-4 py-2 mt-4 ${isSubmitDisabled ? 'bg-[#c0c0c0]' : 'bg-[#123456]'} text-white rounded shadow font-roboto`, __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "Submit Team"))), totalSelectedTeams < 10 && /*#__PURE__*/ React.createElement("div", { className: "font-roboto w-full max-w-xl", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://en.wikipedia.org/wiki/Atlantic_Coast_Conference", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, "ACC:"), renderDropdownForConference('ACC')), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://en.wikipedia.org/wiki/Big_Ten_Conference", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, "Big Ten:"), renderDropdownForConference('BigTen')), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://en.wikipedia.org/wiki/Big_12_Conference", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, "Big 12:"), renderDropdownForConference('Big12')), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://en.wikipedia.org/wiki/Pac-12_Conference", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, "Pac-12:"), renderDropdownForConference('Pac12')), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://en.wikipedia.org/wiki/Southeastern_Conference", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, "SEC:"), renderDropdownForConference('SEC')))); }