function GoogleSheetsInteractionComponent({ title, buttons }) { return /*#__PURE__*/ React.createElement("div", { className: "font-roboto container mx-auto p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, buttons.map(({ label, color })=>/*#__PURE__*/ React.createElement("div", { key: label, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `bg-${color}-500 text-white p-2 rounded shadow hover:bg-${color}-700 w-[200px]`, __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, label))))); } function GoogleSheetsInteractionComponentStory() { const buttonProps = [ { label: 'ユーザーにメッセージを送信する', color: 'blue' }, { label: 'Filter Data By Day and Date', color: 'green' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GoogleSheetsInteractionComponent, { title: "LINE Bot Management", buttons: buttonProps, __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "font-roboto container mx-auto p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "LINE Bot Management"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white p-2 rounded shadow hover:bg-blue-700 w-[200px]", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "Send Messages to Users")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white p-2 rounded shadow hover:bg-green-700 w-[200px]", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, "Filter Data By Day and Date")))); }