function MainComponent() { const [user, setUser] = React.useState({ username: 'ユーザー名', fullName: '山田太郎', bio: 'インスタグラマー / 旅行好き / 写真家', posts: 42, followers: 1500, following: 500, profileImage: '/profile-image.jpg' }); const [posts, setPosts] = React.useState([ { id: 1, imageUrl: '/post-1.jpg' }, { id: 2, imageUrl: '/post-2.jpg' }, { id: 3, imageUrl: '/post-3.jpg' }, { id: 4, imageUrl: '/post-4.jpg' }, { id: 5, imageUrl: '/post-5.jpg' }, { id: 6, imageUrl: '/post-6.jpg' } ]); return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 min-h-screen font-sans", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white border-b border-gray-300 sticky top-0 z-10", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-2 flex items-center justify-between", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "インスタ"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home text-2xl", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "far fa-paper-plane text-2xl", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "far fa-plus-square text-2xl", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "far fa-compass text-2xl", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "far fa-heart text-2xl", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 bg-gray-300 rounded-full overflow-hidden", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: user.profileImage, alt: `${user.username}のプロフィール画像`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-8", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-32 h-32 bg-gray-300 rounded-full overflow-hidden mr-8", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: user.profileImage, alt: `${user.username}のプロフィール画像`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-2", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, user.username), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-8 mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 66, columnNumber: 23 }, __self: this }, user.posts), " 投稿"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 67, columnNumber: 23 }, __self: this }, user.followers), " フォロワー"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 68, columnNumber: 23 }, __self: this }, user.following), " フォロー中")), /*#__PURE__*/ React.createElement("h3", { className: "font-semibold", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, user.fullName), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, user.bio))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, posts.map((post)=>/*#__PURE__*/ React.createElement("div", { key: post.id, className: "aspect-square bg-gray-200 overflow-hidden", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: post.imageUrl, alt: `${user.username}の投稿 ${post.id}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }))))))); }

ユーザー名

山田 太郎

山田太郎