function StepNumbers({ stepNumber, title, isSelected }) { const selectedStyle = "bg-[#1D64F5] text-white"; const unselectedStyle = "bg-[#1F2C38] text-[#52687D]"; const textColor = isSelected ? "text-[#1D64F5]" : "text-[#52687D]"; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `rounded-full w-10 h-10 flex items-center justify-center ${isSelected ? selectedStyle : unselectedStyle} font-open-sans`, __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, stepNumber), /*#__PURE__*/ React.createElement("div", { className: `mt-2 font-open-sans ${textColor}`, __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, title)); } function StepNumbersStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4 p-5", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StepNumbers, { stepNumber: 1, title: "Step One", isSelected: true, __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StepNumbers, { stepNumber: 2, title: "Step Two", isSelected: false, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StepNumbers, { stepNumber: 3, title: "Step Three", isSelected: false, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this })); } function MainComponent({ currentStep }) { const steps = [ { stepNumber: 1, title: "Contact Details", isSelected: currentStep === 1 }, { stepNumber: 2, title: "Our Services", isSelected: currentStep === 2 }, { stepNumber: 3, title: "Budget", isSelected: currentStep === 3 } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-between px-4 py-5 w-full", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, steps.map((step)=>/*#__PURE__*/ React.createElement(StepNumbers, { key: step.stepNumber, stepNumber: step.stepNumber, title: step.title, isSelected: step.isSelected, __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { currentStep: 1, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { currentStep: 2, __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { currentStep: 3, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); }