function MainComponent() { const [count, setCount] = React.useState(50); const pricePer50 = 12500; const extraAmounts = [ 0, 11500, 10500 ]; // Increment for 100 and 150 respectively let additionalCost = count > 50 ? extraAmounts[Math.min(Math.floor((count - 50) / 50), extraAmounts.length - 1)] : 0; let price = pricePer50 + (count / 50 - 1) * additionalCost; const handleCountChange = (e)=>{ setCount(Math.max(e.target.value, 50)); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f9f9f9] min-h-screen flex flex-col items-center justify-center px-4", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl text-[#333] mb-8", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, "自社製造の小物販売イベント・法人向け問い合わせフォーム"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg", action: "MAILTO:matsuoka@yadom.jp", method: "post", enctype: "text/plain", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-[#333] text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "氏名"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "name", name: "name", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "postalCode", className: "block text-[#333] text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "郵便番号"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "postalCode", name: "postalCode", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "address", className: "block text-[#333] text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "住所"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "address", name: "address", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6 flex items-center", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "count", className: "block text-[#333] text-sm font-roboto mb-2 mr-2", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "発注数 (50本単位)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "count", name: "count", value: count, onChange: handleCountChange, className: "shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline w-1/2", min: "50", step: "50", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm ml-2", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "合計金額: ¥", price.toLocaleString())), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "message", className: "block text-[#333] text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "その他"), /*#__PURE__*/ React.createElement("textarea", { id: "message", name: "message", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", rows: "4", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#4a90e2] hover:bg-[#357ab7] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "送信"), /*#__PURE__*/ React.createElement("a", { href: "https://buy.stripe.com/eVa29G0Zw5qu3MQbIJ", target: "_blank", rel: "noopener noreferrer", className: "font-roboto bg-[#000] text-white font-bold py-2 px-4 rounded ml-4", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "初回限定 50本10000円")))); }

自社製造の小物販売 イベント・法人向け問い合わせフォーム

自社製造の小物販売イベント・法人向け問い合わせフォーム