function MainComponent({ routes, filterText }) { const filteredRoutes = routes.filter((route)=>route.destination.toLowerCase().includes(filterText.toLowerCase())); return /*#__PURE__*/ React.createElement("div", { className: "w-full p-4", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-xl mb-4", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, "Bus Ticketing Routes"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "routeFilter", placeholder: "Filter routes", className: "p-2 mb-4 border rounded", value: filterText, readOnly: true, __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, filteredRoutes.map((route)=>/*#__PURE__*/ React.createElement("div", { className: "border p-4", key: route.id, __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto font-bold", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, route.destination), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "Departure: ", route.departureTime), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, "Arrival: ", route.arrivalTime), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "Price: ", route.price))))); } function StoryComponent() { const sampleRoutes = [ { id: 1, destination: "City A", departureTime: "10:00 AM", arrivalTime: "12:00 PM", price: "$20" }, { id: 2, destination: "City B", departureTime: "02:00 PM", arrivalTime: "04:00 PM", price: "$25" }, { id: 3, destination: "City C", departureTime: "06:00 PM", arrivalTime: "08:00 PM", price: "$18" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { routes: sampleRoutes, filterText: "City A", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { routes: sampleRoutes, filterText: "City B", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { routes: sampleRoutes, filterText: "", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this })); }