function CalculateButton({ onCalculate }) { return /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline font-roboto", type: "button", onClick: onCalculate, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "Calculate"); } function CalculateButtonStory() { const calculateSettings = ()=>{ console.log('Calculation triggered'); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CalculateButton, { onCalculate: calculateSettings, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this })); } function MainComponent() { const [powerRating, setPowerRating] = React.useState(0); const [voltage, setVoltage] = React.useState(0); const [fullLoadCurrent, setFullLoadCurrent] = React.useState(0); const [powerFactor, setPowerFactor] = React.useState(0); const [overloadSetting, setOverloadSetting] = React.useState(0); const [shortCircuitSetting, setShortCircuitSetting] = React.useState(0); const [groundFaultSetting, setGroundFaultSetting] = React.useState(0); const calculateSettings = ()=>{ const overload = fullLoadCurrent * 1.25; const shortCircuit = fullLoadCurrent * 8; const groundFault = fullLoadCurrent * 2; setOverloadSetting(overload); setShortCircuitSetting(shortCircuit); setGroundFaultSetting(groundFault); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 bg-gray-100", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-roboto text-center", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, "Electrical Motor Protective Device Calculator"), /*#__PURE__*/ React.createElement("form", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "powerRating", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Power Rating (kW)"), /*#__PURE__*/ React.createElement("input", { name: "powerRating", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 font-roboto leading-tight focus:outline-none focus:shadow-outline", id: "powerRating", type: "number", min: "0", value: powerRating, onChange: (e)=>setPowerRating(+e.target.value), placeholder: "Enter Power Rating", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "voltage", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Voltage (V)"), /*#__PURE__*/ React.createElement("input", { name: "voltage", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 font-roboto leading-tight focus:outline-none focus:shadow-outline", id: "voltage", type: "number", min: "0", value: voltage, onChange: (e)=>setVoltage(+e.target.value), placeholder: "Enter Voltage", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "fullLoadCurrent", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Full Load Current (A)"), /*#__PURE__*/ React.createElement("input", { name: "fullLoadCurrent", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 font-roboto leading-tight focus:outline-none focus:shadow-outline", id: "fullLoadCurrent", type: "number", min: "0", value: fullLoadCurrent, onChange: (e)=>setFullLoadCurrent(+e.target.value), placeholder: "Enter Full Load Current", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "powerFactor", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Power Factor"), /*#__PURE__*/ React.createElement("input", { name: "powerFactor", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 font-roboto leading-tight focus:outline-none focus:shadow-outline", id: "powerFactor", type: "number", min: "0", max: "1", step: "0.01", value: powerFactor, onChange: (e)=>setPowerFactor(+e.target.value), placeholder: "Enter Power Factor", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(CalculateButton, { onCalculate: calculateSettings, __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "results mt-6 bg-white shadow-md rounded px-8 pt-6 pb-8", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, "Calculation Results"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, "Overload Relay Setting: ", overloadSetting.toFixed(2), " A"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, "Short Circuit Protection Setting: ", shortCircuitSetting.toFixed(2), " A"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, "Ground Fault Relay Setting: ", groundFaultSetting.toFixed(2), " A"))); }