function MainComponent() { const stories = Array.from({ length: 1000 }).map((_, index)=>({ title: `Story ${index + 1}`, image: `./images/story_${index + 1}.jpg`, alt: `Illustration for story ${index + 1}`, content: `This is the content for story ${index + 1}. Once upon a time...`, morale: `Morale of story ${index + 1}: Always be kind.`, audio: `./audio/story_${index + 1}.mp3` })); const getRandomStory = ()=>{ const index = Math.floor(Math.random() * stories.length); return stories[index]; }; const story = getRandomStory(); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f5e6cc] flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full text-center py-4 bg-[#ffcc99]", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-crimson-text text-[#333333]", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Bedtime Stories"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#666666]", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Enjoy a collection of delightful and wholesome stories for kids")), /*#__PURE__*/ React.createElement("main", { className: "flex-grow flex flex-col items-center py-8", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[700px] w-full p-4 bg-white shadow-lg rounded-md", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-crimson-text text-[#333333] mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, story.title), /*#__PURE__*/ React.createElement("img", { src: story.image, alt: story.alt, className: "w-full h-[300px] object-cover mb-4 rounded-md", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#555555] mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, story.content), /*#__PURE__*/ React.createElement("div", { className: "bg-[#ffcc99] p-2 rounded-md text-center", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#333333]", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "Morale of the story: ", story.morale)), /*#__PURE__*/ React.createElement("audio", { controls: true, className: "mt-4 w-full", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: story.audio, type: "audio/mpeg", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }), "Your browser does not support the audio element."))), /*#__PURE__*/ React.createElement("footer", { className: "w-full text-center py-4 bg-[#ffcc99]", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#666666]", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "© 2023 Bedtime Stories. All rights reserved."))); }

Story 413