function RideSearchDisplay({ searchTerm, setSearchTerm, filteredRides }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f2f5]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-4 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-lg font-semibold text-gray-700", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, "Search Rides")), /*#__PURE__*/ React.createElement("input", { type: "text", className: "mb-4 p-2 w-full border rounded-md shadow-sm", placeholder: "Filter by destination...", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), name: "search", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, filteredRides.map((ride)=>/*#__PURE__*/ React.createElement("li", { key: ride.id, className: "p-2 border rounded shadow-sm", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium text-gray-700", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, ride.destination), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, "Driver: ", ride.driver, " | Time: ", ride.time)))))); } function RideSearchDisplayStory() { const [searchTerm, setSearchTerm] = React.useState(''); const rides = [ { id: 1, destination: 'Springfield', driver: 'John Doe', time: '3:30 PM' }, { id: 2, destination: 'Shelbyville', driver: 'Jane Doe', time: '4:00 PM' } ]; const filteredRides = rides.filter((ride)=>ride.destination.toLowerCase().includes(searchTerm.toLowerCase())); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RideSearchDisplay, { searchTerm: searchTerm, setSearchTerm: setSearchTerm, filteredRides: filteredRides, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this })); } function MainComponent() { const [searchTerm, setSearchTerm] = React.useState(""); const [rides, setRides] = React.useState([ { id: 1, destination: "New York", driver: "Alice", time: "08:00 AM" }, { id: 2, destination: "Chicago", driver: "Bob", time: "09:30 AM" }, { id: 3, destination: "Los Angeles", driver: "Charlie", time: "11:00 AM" } ]); const filteredRides = rides.filter((ride)=>ride.destination.toLowerCase().includes(searchTerm.toLowerCase())); return /*#__PURE__*/ React.createElement(RideSearchDisplay, { searchTerm: searchTerm, setSearchTerm: setSearchTerm, filteredRides: filteredRides, __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }); }