function CarPriceComparator({ models, categories, onModelChange, onCategoryChange }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row md:space-x-4 mt-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "model", className: "block text-lg font-semibold", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "Model"), /*#__PURE__*/ React.createElement("select", { name: "model", id: "model", className: "w-full p-2 border rounded", onChange: (e)=>onModelChange(e.target.value), __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, models.map((model)=>/*#__PURE__*/ React.createElement("option", { key: model, value: model, __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, model)))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 md:mt-0", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "category", className: "block text-lg font-semibold", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "Category"), /*#__PURE__*/ React.createElement("select", { name: "category", id: "category", className: "w-full p-2 border rounded", onChange: (e)=>onCategoryChange(e.target.value), __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, categories.map((category)=>/*#__PURE__*/ React.createElement("option", { key: category, value: category, __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, category))))); } function CarPriceComparatorStory() { const models = [ 'Model S', 'Model X', 'Model 3', 'Model Y' ]; const categories = [ 'Standard', 'Performance', 'Long Range' ]; const handleModelChange = (model)=>{ console.log('Selected model:', model); }; const handleCategoryChange = (category)=>{ console.log('Selected category:', category); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CarPriceComparator, { models: models, categories: categories, onModelChange: handleModelChange, onCategoryChange: handleCategoryChange, __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this })); } function MainComponent() { const carData = [ { model: 'Sedan', category: 'Compact', price: 15000, image: 'car1.jpg', description: 'Great condition, low mileage!' }, { model: 'SUV', category: 'Full-Size', price: 25000, image: 'car2.jpg', description: 'Spacious and elegant' } ]; const [selectedModel, setSelectedModel] = React.useState(''); const [selectedCategory, setSelectedCategory] = React.useState(''); const models = [ ...new Set(carData.map((car)=>car.model)) ]; const categories = [ ...new Set(carData.map((car)=>car.category)) ]; const filteredCars = carData.filter((car)=>{ return (selectedModel === '' || car.model === selectedModel) && (selectedCategory === '' || car.category === selectedCategory); }); const minPrice = Math.min(...filteredCars.map((car)=>car.price)); const maxPrice = Math.max(...filteredCars.map((car)=>car.price)); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#123456] text-white p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Car Sales"), /*#__PURE__*/ React.createElement("nav", { className: "space-x-4", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-gray-300", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-gray-300", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Car models"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-gray-300", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Contact")))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "my-4", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Compare Car Prices"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row md:space-x-4 mt-4", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "model", className: "block text-lg font-semibold", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "Model"), /*#__PURE__*/ React.createElement("select", { name: "model", id: "model", className: "w-full p-2 border rounded", onChange: (e)=>setSelectedModel(e.target.value), __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, "All Models"), models.map((model)=>/*#__PURE__*/ React.createElement("option", { key: model, value: model, __source: { fileName: "", lineNumber: 42, columnNumber: 19 }, __self: this }, model)))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 md:mt-0", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "category", className: "block text-lg font-semibold", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "Category"), /*#__PURE__*/ React.createElement("select", { name: "category", id: "category", className: "w-full p-2 border rounded", onChange: (e)=>setSelectedCategory(e.target.value), __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, "All Categories"), categories.map((category)=>/*#__PURE__*/ React.createElement("option", { key: category, value: category, __source: { fileName: "", lineNumber: 51, columnNumber: 19 }, __self: this }, category))))), filteredCars.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "Price Range: $", minPrice.toLocaleString(), " - $", maxPrice.toLocaleString()))), /*#__PURE__*/ React.createElement("section", { className: "flex flex-wrap -mx-4", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, filteredCars.map((car, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-full md:w-1/3 lg:w-1/4 p-4", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: car.image, alt: `${car.model} ${car.category} car`, className: "w-full h-[200px] object-cover rounded", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl mt-4 font-bold", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, car.model), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, car.description), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg font-semibold text-[#123456]", __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }, "$", car.price.toLocaleString())), /*#__PURE__*/ React.createElement("button", { className: "mt-4 w-full bg-[#123456] text-white py-2 rounded hover:bg-[#0e2b47]", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, "View Details"))))))); }