function ActorSelector({ actors, team, handleChange, handleSubmit }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-md shadow-md p-4 mb-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Select Your Team"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", htmlFor: "player1", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "Player 1"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-gray-300 rounded-md", id: "player1", name: "player1", type: "text", placeholder: "Enter player name", value: team.player1, onChange: handleChange, __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", htmlFor: "player2", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Player 2"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-gray-300 rounded-md", id: "player2", name: "player2", type: "text", placeholder: "Enter player name", value: team.player2, onChange: handleChange, __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", htmlFor: "player3", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Player 3"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-gray-300 rounded-md", id: "player3", name: "player3", type: "text", placeholder: "Enter player name", value: team.player3, onChange: handleChange, __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4 mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, actors.map((actor, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-center", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: actor.image, alt: `Actor ${index + 1}`, className: "w-[100px] h-[100px] object-cover mx-auto rounded-full mb-2", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, actor.name), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, "$", actor.cost)))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#121212] text-white py-2 rounded-md", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "Submit Team"))); } function ActorSelectorStory() { const exampleActors = [ { image: "/path/to/actor1.jpg", name: "Actor 1", cost: 1000 }, { image: "/path/to/actor2.jpg", name: "Actor 2", cost: 2000 }, { image: "/path/to/actor3.jpg", name: "Actor 3", cost: 3000 }, { image: "/path/to/actor4.jpg", name: "Actor 4", cost: 4000 }, { image: "/path/to/actor5.jpg", name: "Actor 5", cost: 5000 }, { image: "/path/to/actor6.jpg", name: "Actor 6", cost: 6000 }, { image: "/path/to/actor7.jpg", name: "Actor 7", cost: 7000 }, { image: "/path/to/actor8.jpg", name: "Actor 8", cost: 8000 }, { image: "/path/to/actor9.jpg", name: "Actor 9", cost: 9000 }, { image: "/path/to/actor10.jpg", name: "Actor 10", cost: 10000 }, { image: "/path/to/actor11.jpg", name: "Actor 11", cost: 11000 }, { image: "/path/to/actor12.jpg", name: "Actor 12", cost: 12000 }, { image: "/path/to/actor13.jpg", name: "Actor 13", cost: 13000 }, { image: "/path/to/actor14.jpg", name: "Actor 14", cost: 14000 }, { image: "/path/to/actor15.jpg", name: "Actor 15", cost: 15000 } ]; const exampleTeam = { player1: '', player2: '', player3: '' }; const handleChange = (e)=>{ // handle input changes }; const handleSubmit = (e)=>{ e.preventDefault(); // handle form submission }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 107, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ActorSelector, { actors: exampleActors, team: exampleTeam, handleChange: handleChange, handleSubmit: handleSubmit, __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this })); } function MainComponent() { const [team, setTeam] = React.useState({ player1: "", player2: "", player3: "" }); const handleChange = (e)=>{ const { name, value } = e.target; setTeam((prevTeam)=>({ ...prevTeam, [name]: value })); }; const handleSubmit = (e)=>{ e.preventDefault(); // logic to submit the team would go here }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#010101] text-white text-center p-4", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "Live Show Fantasy Game")), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-md shadow-md p-4 mb-4", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Select Your Team"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", htmlFor: "player1", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, "Player 1"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-gray-300 rounded-md", id: "player1", name: "player1", type: "text", placeholder: "Enter player name", value: team.player1, onChange: handleChange, __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", htmlFor: "player2", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "Player 2"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-gray-300 rounded-md", id: "player2", name: "player2", type: "text", placeholder: "Enter player name", value: team.player2, onChange: handleChange, __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", htmlFor: "player3", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, "Player 3"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-gray-300 rounded-md", id: "player3", name: "player3", type: "text", placeholder: "Enter player name", value: team.player3, onChange: handleChange, __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#121212] text-white py-2 rounded-md", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Submit Team"))))); }