function MainComponent({ title, symptoms }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-6 bg-[#f8f9fa] w-full min-h-screen", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("img", { src: "/assets/images/fatigue-man-suit-train.jpg", alt: "A fatigued man wearing a suit sitting in a train", className: "w-[400px] h-[400px] mb-6 rounded-lg", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, symptoms.map((symptom, idx)=>{ return /*#__PURE__*/ React.createElement("div", { key: idx, className: "bg-white shadow-md p-4 rounded-lg", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 10, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${symptom.icon} text-2xl text-gray-700 mr-2`, __source: { fileName: "", lineNumber: 11, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto", __source: { fileName: "", lineNumber: 12, columnNumber: 17 }, __self: this }, symptom.title)), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }, symptom.description)); }))); } function StoryComponent() { const symptoms = [ { icon: 'fas fa-tired', title: 'Fatigue', description: 'Extreme tiredness and lack of energy' }, { icon: 'fas fa-brain', title: 'Cognitive Issues', description: 'Difficulty concentrating and memory problems' }, { icon: 'fas fa-dizzy', title: 'Dizziness', description: 'Feeling lightheaded and unsteady' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { title: "Symptoms of Heavy Metal Toxicity", symptoms: symptoms, __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this })); }