function MatchButton({ onAccept, onReject }) { return /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onAccept, className: "inline-block px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "承認"), /*#__PURE__*/ React.createElement("button", { onClick: onReject, className: "inline-block px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, "拒否")); } function MatchButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg mb-2", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "基本的なボタングループ"), /*#__PURE__*/ React.createElement(MatchButton, { onAccept: ()=>console.log("承認されました"), onReject: ()=>console.log("拒否されました"), __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }))); } function ChatPreview({ avatar, username, lastMessage, time }) { return /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4 p-4 hover:bg-gray-50 cursor-pointer", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 rounded-full overflow-hidden flex-shrink-0", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: avatar, alt: `${username}のプロフィール画像`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-grow min-w-0", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-baseline", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium text-gray-900 truncate", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, username), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, time)), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 text-sm truncate", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, lastMessage))); } function ChatPreviewStory() { const messages = [ { avatar: "/images/avatar1.jpg", username: "田中さん", lastMessage: "明日の会議について相談したいのですが、お時間ありますか？", time: "14:30" }, { avatar: "/images/avatar2.jpg", username: "佐藤さん", lastMessage: "了解しました！", time: "12:15" }, { avatar: "/images/avatar3.jpg", username: "鈴木さん", lastMessage: "写真を送ります。", time: "昨日" } ]; return /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white shadow rounded-lg", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement(ChatPreview, { key: index, ...message, __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }))); } function ProfileCard({ image, name, age, interests }) { return /*#__PURE__*/ React.createElement("div", { className: "rounded-lg shadow-lg p-6 bg-white max-w-sm", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: `${name}のプロフィール写真`, className: "w-32 h-32 rounded-full object-cover mb-4", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-600 mt-1", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, age, "歳"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex flex-wrap gap-2 justify-center", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, interests.map((interest, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, interest))))); } function ProfileCardStory() { const sampleData = { image: "/sample-avatar.jpg", name: "田中花子", age: 28, interests: [ "旅行", "写真", "料理", "読書" ] }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ProfileCard, { ...sampleData, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#FF69B4] to-[#FFB6C1] flex flex-col items-center justify-center px-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center space-y-8", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold text-white font-montserrat", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "マッチングアプリへようこそ"), /*#__PURE__*/ React.createElement("p", { className: "text-lg md:text-xl text-white font-roboto max-w-2xl", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, "新しい出会いを見つけましょう"), /*#__PURE__*/ React.createElement("div", { className: "space-x-4 pt-6", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-white text-[#FF69B4] px-8 py-3 rounded-full font-bold hover:bg-opacity-90 transition-all duration-300 shadow-lg font-roboto", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "ログイン"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#FF1493] text-white px-8 py-3 rounded-full font-bold hover:bg-opacity-90 transition-all duration-300 shadow-lg font-roboto", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "新規登録")))); }