function MainComponent() { const [pokemonName, setPokemonName] = React.useState(""); const [pokemonImage, setPokemonImage] = React.useState(""); const [pokedex, setPokedex] = React.useState([]); const [darkMode, setDarkMode] = React.useState(false); const [searching, setSearching] = React.useState(false); React.useEffect(()=>{ const theme = window.localStorage.getItem("theme"); setDarkMode(theme === "dark" ? true : false); }, []); React.useEffect(()=>{ window.localStorage.setItem("theme", darkMode ? "dark" : "light"); }, [ darkMode ]); const searchPokemon = async ()=>{ setSearching(true); try { const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName.toLowerCase()}`); const data = await response.json(); setPokemonImage(data.sprites.front_default); setSearching(false); } catch (error) { setPokemonImage(""); setSearching(false); } }; const handleAddPokemon = (e)=>{ e.preventDefault(); if (pokemonName !== "" && pokemonImage !== "") { const newPokemon = { id: pokedex.length + 1, name: pokemonName, image: pokemonImage }; setPokedex([ newPokemon, ...pokedex ]); setPokemonName(""); setPokemonImage(""); } }; const toggleDarkMode = ()=>setDarkMode(!darkMode); return /*#__PURE__*/ React.createElement("div", { className: `${darkMode ? "bg-[#2d2d2d] text-white" : "bg-[#fafafa] text-black"} min-h-screen`, __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center py-8", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleDarkMode, className: `p-2 rounded-full mb-4 ${darkMode ? "bg-[#fafafa] text-[#2d2d2d]" : "bg-[#2d2d2d] text-[#fafafa]"}`, __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, darkMode ? "💡 Light" : "🌙 Dark"), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-[#ffcb05] mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "📚 全国図鑑"), /*#__PURE__*/ React.createElement("form", { className: `${darkMode ? "bg-[#424242]" : "bg-white"} w-full max-w-2xl p-4 rounded-lg shadow`, onSubmit: (e)=>{ e.preventDefault(); searchPokemon(); }, __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: `${darkMode ? "bg-[#616161] border-[#616161]" : "border border-gray-300"} w-full p-3 rounded focus:outline-none focus:ring-2 focus:ring-[#ffcb05] text-current`, type: "text", placeholder: "ポケモンの名前を入力してください", name: "pokemonName", value: pokemonName, onChange: (e)=>setPokemonName(e.target.value), __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 mt-2 bg-[#ffcb05] text-black rounded hover:bg-[#d4a904] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#d4a904]", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "検索")), searching ? /*#__PURE__*/ React.createElement("p", { className: "mt-4", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "検索中...") : pokemonImage ? /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: pokemonImage, alt: `${pokemonName} の画像`, className: "w-[200px] h-[200px]", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-2 bg-[#ffcb05] text-black rounded px-4 py-2 hover:bg-[#d4a904]", onClick: handleAddPokemon, __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "全国図鑑に追加")) : null, /*#__PURE__*/ React.createElement("ul", { className: "w-full max-w-2xl mt-6", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, pokedex.map((pokemon)=>/*#__PURE__*/ React.createElement("li", { key: pokemon.id, className: `${darkMode ? "bg-[#424242]" : "bg-white"} px-4 py-3 mb-3 rounded-lg shadow flex justify-between items-center`, __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, pokemon.name), /*#__PURE__*/ React.createElement("img", { src: pokemon.image, alt: `${pokemon.name} の画像`, className: "w-[100px] h-[100px]", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this })))))); }