function MainComponent() { const [enginePower, setEnginePower] = React.useState(0); const [engineWeight, setEngineWeight] = React.useState(0); const [engines, setEngines] = React.useState([ { id: 1, name: "6.1L V8 HEMI", power: 425, weight: 500, image: "/images/6.1l-hemi-engine.jpg", sound: "/sounds/6.1l-hemi.mp3" }, { id: 2, name: "5.0L V8 Coyote", power: 460, weight: 430, image: "/images/5.0l-coyote-engine.jpg", sound: "/sounds/5.0l-coyote.mp3" }, { id: 3, name: "3.5L V6 EcoBoost", power: 450, weight: 440, image: "/images/3.5l-ecoboost-engine.jpg", sound: "/sounds/3.5l-ecoboost.mp3" } ]); const [selectedEngine, setSelectedEngine] = React.useState(engines[0]); const playEngineSound = ()=>{ const audio = new Audio(selectedEngine.sound); audio.play(); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-[#121212]", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl p-4 bg-[#EEEEEE] rounded-lg shadow-md", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Engine Database"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, engines.map((engine)=>/*#__PURE__*/ React.createElement("div", { key: engine.id, className: `p-4 ${engine.id === selectedEngine.id ? "bg-gray-200" : "bg-white"} rounded-lg shadow cursor-pointer`, onClick: ()=>setSelectedEngine(engine), __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: engine.image, alt: `${engine.name} engine`, className: "w-full h-auto rounded-lg", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-center text-lg font-roboto text-[#121212] mt-2", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, engine.name), /*#__PURE__*/ React.createElement("div", { className: "text-center text-sm font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "Power: ", engine.power, " HP"), /*#__PURE__*/ React.createElement("div", { className: "text-center text-sm font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "Weight: ", engine.weight, " lbs")))), /*#__PURE__*/ React.createElement("button", { className: "mt-4 w-full px-4 py-2 font-roboto text-lg text-[#EEEEEE] bg-[#121212] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#333333] focus:ring-opacity-50", onClick: playEngineSound, __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Play Engine Sound"))); }