function MainComponent() { const [searchTerm, setSearchTerm] = React.useState(''); const [selectedIdol, setSelectedIdol] = React.useState(null); const [idols, setIdols] = React.useState([]); const [images, setImages] = React.useState([]); React.useEffect(()=>{ // Here you should replace the below line with actual fetch from backend to get idols const fetchedIdols = []; // Simulating fetched idols data setIdols(fetchedIdols); }, []); React.useEffect(()=>{ if (selectedIdol) { // Here you should replace the below line with actual fetch from backend using selectedIdol id or name to get images const fetchedImages = []; // Simulating fetched images data for selected idol setImages(fetchedImages); } }, [ selectedIdol ]); function handleSearchChange(event) { setSearchTerm(event.target.value); // Here you should add logic to filter idols based on searchTerm } function handleIdolSelect(idol) { setSelectedIdol(idol); // You may reset other state like setImages([]) if needed here } const filteredIdols = idols.filter((idol)=>idol.name.toLowerCase().includes(searchTerm.toLowerCase())); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#ffefd5] p-4 text-center", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-[#696969]", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "お気に入りの推しメンギャラリー")), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "推しメンを検索", className: "w-full p-2 border border-gray-200 rounded-md", value: searchTerm, onChange: handleSearchChange, __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 p-4", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, filteredIdols.map((idol)=>/*#__PURE__*/ React.createElement("div", { key: idol.id, className: "cursor-pointer", onClick: ()=>handleIdolSelect(idol), __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: idol.thumbnail, alt: `${idol.name}のサムネイル`, className: "w-full", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, idol.name)))), selectedIdol && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center my-4", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, selectedIdol.name), /*#__PURE__*/ React.createElement("img", { src: selectedIdol.profileImage, alt: `${selectedIdol.name}のプロフィール画像`, className: "mx-auto w-24 h-24 rounded-full", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 p-4", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, images.map((image)=>/*#__PURE__*/ React.createElement("img", { key: image.id, src: image.url, alt: `${selectedIdol.name}の関連画像`, className: "w-full cursor-pointer", onClick: ()=>{}, __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }))))); }