function MainComponent() { const [hashtag, setHashtag] = React.useState(''); const [posts, setPosts] = React.useState([ { id: 1, title: "作品タイトル1", description: "この作品は...", imageUrl: "./images/artwork1.jpg", hashtag: "#ジャンル1" }, { id: 2, title: "作品タイトル2", description: "この作品は...", imageUrl: "./images/artwork2.jpg", hashtag: "#ジャンル2" }, { id: 3, title: "作品タイトル3", description: "この作品は...", imageUrl: "./images/artwork3.jpg", hashtag: "#ジャンル3" } ]); const [title, setTitle] = React.useState(''); const [description, setDescription] = React.useState(''); const [imageUrl, setImageUrl] = React.useState(''); const [viewHashtag, setViewHashtag] = React.useState(''); const [dailyImageUrl, setDailyImageUrl] = React.useState('./images/daily.jpg'); React.useEffect(()=>{ const images = [ './images/world1.jpg', './images/world2.jpg', './images/world3.jpg', './images/world4.jpg' ]; const randomImage = images[Math.floor(Math.random() * images.length)]; setDailyImageUrl(randomImage); }, []); const handleSubmit = (e)=>{ e.preventDefault(); const newPost = { id: posts.length + 1, title, description, imageUrl, hashtag }; setPosts([ ...posts, newPost ]); setTitle(''); setDescription(''); setImageUrl(''); setHashtag(''); }; const filteredPosts = viewHashtag ? posts.filter((post)=>post.hashtag === viewHashtag) : posts; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FEE2F8] font-crimson-text", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#FFC0CB] py-4 flex flex-col items-center", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: dailyImageUrl, alt: "Hand-holding in a circle illustration for peaceful", className: "w-full lg:max-w-[600px] rounded-md shadow-lg mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-xl text-[#333]", __source: { fileName: "", lineNumber: 49, columnNumber: 21 }, __self: this }, "作品紹介"), /*#__PURE__*/ React.createElement("select", { className: "mt-2 p-2 rounded shadow border border-gray-300", value: viewHashtag, onChange: (e)=>setViewHashtag(e.target.value), __source: { fileName: "", lineNumber: 50, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 54, columnNumber: 25 }, __self: this }, "全てのジャンル"), [ ...new Set(posts.map((post)=>post.hashtag)) ].map((hashtag)=>/*#__PURE__*/ React.createElement("option", { key: hashtag, value: hashtag, __source: { fileName: "", lineNumber: 56, columnNumber: 29 }, __self: this }, hashtag))))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "bg-white p-4 shadow-md rounded-md mb-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 63, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", id: "title", name: "title", value: title, onChange: (e)=>setTitle(e.target.value), className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 64, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { id: "description", name: "description", rows: "4", value: description, onChange: (e)=>setDescription(e.target.value), className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 67, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", id: "imageUrl", name: "imageUrl", value: imageUrl, onChange: (e)=>setImageUrl(e.target.value), className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 70, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", id: "hashtag", name: "hashtag", value: hashtag, onChange: (e)=>setHashtag(e.target.value), className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 73, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 75, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-pink-500 hover:bg-pink-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 76, columnNumber: 25 }, __self: this }, "投稿"))), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, filteredPosts.map((post)=>/*#__PURE__*/ React.createElement("div", { key: post.id, className: "bg-white shadow-md rounded-md overflow-hidden", __source: { fileName: "", lineNumber: 83, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: post.imageUrl, alt: `${post.title}のイメージ`, className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 84, columnNumber: 29 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 85, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 86, columnNumber: 33 }, __self: this }, post.title), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 87, columnNumber: 33 }, __self: this }, post.description), /*#__PURE__*/ React.createElement("span", { className: "inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2", __source: { fileName: "", lineNumber: 88, columnNumber: 33 }, __self: this }, post.hashtag))))))); }