function MainComponent({ busIntervals }) { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, busIntervals.map((interval, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4 flex flex-col items-center bg-[#f0f0f0] p-2 rounded-lg", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, "Stop: ", interval.stopName), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "Bus: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 7, columnNumber: 39 }, __self: this }, interval.bus)), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, "Next arrival in: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 8, columnNumber: 51 }, __self: this }, interval.nextArrival)), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, "Intervals: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 9, columnNumber: 45 }, __self: this }, interval.interval), " minutes")))); } function StoryComponent() { const busIntervalsExample = [ { stopName: "Downtown", bus: "Bus 1A", nextArrival: "3 minutes", interval: "10" }, { stopName: "Central Park", bus: "Bus 2B", nextArrival: "5 minutes", interval: "15" }, { stopName: "Harbor", bus: "Bus 3C", nextArrival: "7 minutes", interval: "20" }, { stopName: "University", bus: "Bus 4D", nextArrival: "2 minutes", interval: "12" }, { stopName: "Airport", bus: "Bus 5E", nextArrival: "10 minutes", interval: "25" } ]; return /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center my-4", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, "City Bus Interval Management"), /*#__PURE__*/ React.createElement(MainComponent, { busIntervals: busIntervalsExample, __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this })); }

City Bus Interval Management

Stop: Downtown

Stop: Central Park

Stop: Harbor

Stop: University

Stop: Airport