function MainComponent() { const videos = []; const [searchTerm, setSearchTerm] = React.useState(''); const handleSearchChange = (e)=>{ setSearchTerm(e.target.value); }; const [comments, setComments] = React.useState({}); const handleCommentSubmit = (videoId, comment)=>{ const videoComments = comments[videoId] || []; setComments({ ...comments, [videoId]: [ ...videoComments, comment ] }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FAFAFA] font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex items-center py-4 px-6", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-[#444] font-bold mb-2", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "AV動画検索サイト"), /*#__PURE__*/ React.createElement("p", { className: "mb-4 text-sm text-[#666]", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "プロジェクト紹介、ブログ、開発者からのメッセージなど"), /*#__PURE__*/ React.createElement("nav", { className: "flex space-x-4 text-sm text-[#888]", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#555]", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, "FANZA動画"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, "|"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#555]", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, "FANZA見放題"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, "|"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#555]", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "痴女"))), /*#__PURE__*/ React.createElement("div", { className: "ml-auto w-1/3", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", value: searchTerm, onChange: handleSearchChange, className: "w-full pl-10 pr-4 py-2 border rounded-full text-sm focus:outline-none focus:border-[#F58634]", placeholder: "検索する", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-search absolute top-2 left-3 text-[#AAA]", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-6 pt-4", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-[#444] mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "人気の動画"), /*#__PURE__*/ React.createElement("ul", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, videos.map((video)=>/*#__PURE__*/ React.createElement("li", { key: video.id, className: "bg-white rounded shadow-md overflow-hidden", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full pb-[56.25%]", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: video.thumbnail, alt: `Thumbnail of video titled ${video.title}`, className: "absolute w-full h-full object-cover", __source: { fileName: "", lineNumber: 60, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm text-[#333] font-semibold mb-1", __source: { fileName: "", lineNumber: 63, columnNumber: 19 }, __self: this }, video.title), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-[#666] mb-1", __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this }, video.text), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between text-xs text-[#AAA]", __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 66, columnNumber: 21 }, __self: this }, video.duration), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 67, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-heart", __source: { fileName: "", lineNumber: 68, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-1", __source: { fileName: "", lineNumber: 69, columnNumber: 23 }, __self: this }, video.likes))))))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-white shadow mt-8", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto py-4 px-6 text-sm", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#666]", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "© AV動画検索サイト. All rights reserved."), /*#__PURE__*/ React.createElement("nav", { className: "flex space-x-4 text-[#888]", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#555]", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, "利用規約"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#555]", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, "プライバシーポリシー"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#555]", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, "お問い合わせ")))))); }