function AnimeSubmitButton({ label }) { return /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-purple-600 text-white font-roboto font-semibold rounded-md shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, label); } function AnimeSubmitButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AnimeSubmitButton, { label: "Get Recommendation", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } function MainComponent() { const [favoriteAnime, setFavoriteAnime] = React.useState(''); const [recommendations, setRecommendations] = React.useState([ 'Attack on Titan', 'Fullmetal Alchemist: Brotherhood', 'My Hero Academia' ]); const handleInputChange = (event)=>{ setFavoriteAnime(event.target.value); }; const handleFormSubmit = (event)=>{ event.preventDefault(); if (favoriteAnime.toLowerCase().includes('naruto')) { setRecommendations([ 'Naruto Shippuden', 'Boruto: Naruto Next Generations', 'Bleach' ]); } else if (favoriteAnime.toLowerCase().includes('one piece')) { setRecommendations([ 'One Piece: Stampede', 'Hunter x Hunter', 'Fairy Tail' ]); } else { setRecommendations([ 'Sword Art Online', 'Tokyo Ghoul', 'Death Note' ]); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto text-purple-700 mb-6", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, "Anime Recommendation App"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleFormSubmit, className: "w-full max-w-md bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700 font-semibold font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Favorite Anime"), /*#__PURE__*/ React.createElement("input", { name: "favoriteAnime", type: "text", value: favoriteAnime, onChange: handleInputChange, className: "mt-1 block w-full px-3 py-2 bg-gray-200 border border-gray-300 rounded-md text-gray-900 font-roboto placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-600", placeholder: "Enter your favorite anime", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement(AnimeSubmitButton, { label: "Get Recommendation", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-8 w-full max-w-md bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto mb-4 text-gray-700", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "Recommended Animes"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, recommendations.map((anime, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, anime))))); }