function MainComponent() { const [viewMode, setViewMode] = React.useState('normal'); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#f8f9fa] p-2 flex justify-between items-center shadow-md", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-camera text-lg", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, "Instagram"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setViewMode('normal'), className: "mx-1", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-border-all text-lg", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setViewMode('grid'), className: "mx-1", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-th text-lg", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setViewMode('list'), className: "mx-1", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars text-lg", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane text-lg", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `flex-grow overflow-y-scroll ${viewMode === 'grid' ? 'grid grid-cols-3 gap-2 p-2' : ''}`, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, [ ...Array(viewMode === 'grid' ? 9 : 1) ].map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `${viewMode === 'list' ? 'my-2' : ''}`, __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, viewMode !== 'grid' && /*#__PURE__*/ React.createElement("div", { className: "my-2 mx-2", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./profile-pic-placeholder.png", alt: "ユーザープロファイル写真", className: "w-8 h-8 rounded-full", __source: { fileName: "", lineNumber: 28, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 font-semibold", __source: { fileName: "", lineNumber: 29, columnNumber: 19 }, __self: this }, "username"))), /*#__PURE__*/ React.createElement("img", { src: "./post-placeholder.png", alt: `ユーザー投稿コンテンツ ${viewMode}`, className: `${viewMode === 'grid' ? 'w-full h-auto' : 'w-full'}`, __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }), viewMode !== 'grid' && /*#__PURE__*/ React.createElement("div", { className: "mx-2", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between my-2", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 37, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-heart text-lg mr-1", __source: { fileName: "", lineNumber: 38, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "far fa-comment text-lg", __source: { fileName: "", lineNumber: 39, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("i", { className: "far fa-bookmark text-lg", __source: { fileName: "", lineNumber: 41, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, "1,234 likes"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold mr-1", __source: { fileName: "", lineNumber: 45, columnNumber: 19 }, __self: this }, "username"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 46, columnNumber: 19 }, __self: this }, "投稿キャプション...")))))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#f8f9fa] p-2 flex justify-around items-center shadow-md", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home text-lg", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-lg", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus-square text-lg", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart text-lg", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-lg", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }))); }