function MainComponent({ name, role, about, projects, contact }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center bg-[#f0f0f0] p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center my-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl text-[#333]", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, name), /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl text-[#666]", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, role)), /*#__PURE__*/ React.createElement("div", { className: "my-4 w-full", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-2xl text-[#333]", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, "About Me"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#666]", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, about)), /*#__PURE__*/ React.createElement("div", { className: "my-4 w-full", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-2xl text-[#333]", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "Projects"), projects.map((project, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "my-2 p-2 border border-[#ccc]", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-roboto text-xl text-[#333]", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, project.title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#666]", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, project.description)))), /*#__PURE__*/ React.createElement("div", { className: "my-4 w-full", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-2xl text-[#333]", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Contact"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#666]", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, contact))); } function StoryComponent() { const props = { name: "John Doe", role: "Web Developer", about: "I'm a passionate web developer with a focus on modern JavaScript frameworks and libraries. Always eager to learn new technologies and create impactful web applications.", projects: [ { title: "Project 1", description: "This is a cool project I did." }, { title: "Project 2", description: "This is another cool project I worked on." } ], contact: "Contact me at: johndoe@example.com" }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { ...props, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this })); }