function MainComponent({ objects }) { const handleClick = (obj)=>{ window.location.href = `https://en.wikipedia.org/wiki/${obj.name}`; }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#000000] text-white w-full h-full overflow-auto", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto my-4", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, "Planets and celestial bodies in the night sky"), /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-center mb-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "images/telescope.jpg", alt: "A telescope against a dark sky", className: "w-[100px] h-[100px] object-contain mx-2 rounded-full", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "images/moon.jpg", alt: "A full moon image", className: "w-[100px] h-[100px] object-contain mx-2 rounded-full", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-2 place-items-center", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, objects.map((obj, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-[#1e1e1e] cursor-pointer relative rounded-full", style: { width: '8vw', height: '8vw' }, onClick: ()=>handleClick(obj), __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: obj.image, alt: `Image of ${obj.name}`, className: "w-full h-full object-cover rounded-full", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 px-2 bg-[#00000080] text-center rounded-b-full", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xs font-crimson-text", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, obj.name)))))); } function StoryComponent() { const exampleObjects = [ { name: 'Mercury', image: 'images/mercury.jpg', description: 'The smallest and innermost planet in the Solar System.' }, { name: 'Venus', image: 'images/venus.jpg', description: 'The second planet from the Sun, orbiting it every 224.7 Earth days.' }, { name: 'Earth', image: 'images/earth.jpg', description: 'Our home planet, the third planet from the Sun.' }, { name: 'Mars', image: 'images/mars.jpg', description: 'The fourth planet from the Sun, known for its red appearance.' }, { name: 'Jupiter', image: 'images/jupiter.jpg', description: 'The largest planet in the Solar System.' }, { name: 'Saturn', image: 'images/saturn.jpg', description: 'Known for its prominent ring system.' }, { name: 'Uranus', image: 'images/uranus.jpg', description: 'The seventh planet from the Sun with a unique tilt.' }, { name: 'Neptune', image: 'images/neptune.jpg', description: 'The eighth and farthest known Solar planet from the Sun.' }, { name: 'Andromeda Galaxy', image: 'images/andromeda.jpg', description: 'A spiral galaxy approximately 2.5 million light-years from Earth.' }, { name: 'Orion Nebula', image: 'images/orion.jpg', description: 'A diffuse nebula situated in the Milky Way.' }, { name: 'Sirius', image: 'images/sirius.jpg', description: 'The brightest star in the night sky.' }, { name: 'Pleiades', image: 'images/pleiades.jpg', description: 'An open star cluster containing middle-aged, hot B-type stars.' }, { name: 'Betelgeuse', image: 'images/betelgeuse.jpg', description: 'A red supergiant star roughly 700 light years from Earth.' }, { name: 'Milky Way', image: 'images/milkyway.jpg', description: 'The galaxy that contains our Solar System.' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 107, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { objects: exampleObjects, __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this })); }