function IndigoSubmitButton({ type = "submit", label }) { const buttonClasses = "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"; return /*#__PURE__*/ React.createElement("button", { type: type, className: buttonClasses, __source: { fileName: "", lineNumber: 4, columnNumber: 5 }, __self: this }, label); } function IndigoSubmitButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(IndigoSubmitButton, { label: "キャラクターを作る", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f5f5f5] p-6", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center mb-6 font-sans", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "ビリヤードの擬人化キャラクターを作れるサイト"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-6", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(IndigoSubmitButton, { label: "キャラクターを作る", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "image1.jpg", alt: "ビリヤードのキャラクター画像1", className: "w-full h-auto rounded-lg shadow-md", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "image2.jpg", alt: "ビリヤードのキャラクター画像2", className: "w-full h-auto rounded-lg shadow-md", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "image3.jpg", alt: "ビリヤードのキャラクター画像3", className: "w-full h-auto rounded-lg shadow-md", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "image4.jpg", alt: "ビリヤードのキャラクター画像4", className: "w-full h-auto rounded-lg shadow-md", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "image5.jpg", alt: "ビリヤードのキャラクター画像5", className: "w-full h-auto rounded-lg shadow-md", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "image6.jpg", alt: "ビリヤードのキャラクター画像6", className: "w-full h-auto rounded-lg shadow-md", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "image7.jpg", alt: "ビリヤードのキャラクター画像7", className: "w-full h-auto rounded-lg shadow-md", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "image8.jpg", alt: "ビリヤードのキャラクター画像8", className: "w-full h-auto rounded-lg shadow-md", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this })))); }