function MainComponent() { const [feedback, setFeedback] = React.useState(''); const [darkMode, setDarkMode] = React.useState(false); const [generatedPDF, setGeneratedPDF] = React.useState(null); const handleFeedbackChange = (event)=>{ setFeedback(event.target.value); }; const handleFormSubmit = async (event)=>{ event.preventDefault(); const htmlString = `Feedback

Feedback PDF

${feedback}

`; try { const response = await fetch('/integrations/pdf-generation/pdf', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ source: { html: htmlString } }) }); const pdfBlob = await response.blob(); setGeneratedPDF(URL.createObjectURL(pdfBlob)); } catch (error) { console.error('Error generating PDF:', error); } }; const handleDarkModeToggle = ()=>{ setDarkMode(!darkMode); }; const darkModeClasses = darkMode ? 'bg-[#121212] text-white' : 'bg-white text-[#121212]'; const navigationBar = /*#__PURE__*/ React.createElement("div", { className: `flex justify-between items-center ${darkModeClasses}`, __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, "Portfolio"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, [ 'Home', 'About', 'Work', 'Contact', 'Feedback' ].map((section)=>/*#__PURE__*/ React.createElement("a", { key: section, href: `#${section.toLowerCase()}`, className: "mx-2 font-roboto hover:text-blue-500", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, section))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleDarkModeToggle, name: "dark-mode-toggle", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, darkMode ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-sun text-yellow-300", __source: { fileName: "", lineNumber: 46, columnNumber: 23 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-moon text-gray-600", __source: { fileName: "", lineNumber: 46, columnNumber: 72 }, __self: this })))); const contactSection = /*#__PURE__*/ React.createElement("div", { id: "contact", className: `flex flex-col items-center ${darkModeClasses}`, __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("video", { autoPlay: true, loop: true, muted: true, style: { width: '100%', maxWidth: '200px', height: 'auto' }, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: "/dinosaur.mp4", type: "video/mp4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }), "Your browser does not support the video tag."), /*#__PURE__*/ React.createElement("div", { className: "w-[200px] h-[200px]", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/profile.jpg", alt: "Professional headshot of the portfolio owner", className: "rounded-full w-full h-full object-cover", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-envelope mr-2 ${darkMode ? 'text-yellow-300' : 'text-pink-600'}`, __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: "mailto:john.doe@example.com", className: `hover:text-green-500 font-roboto ${darkMode ? 'hover:text-green-300' : ''}`, __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, "john.doe@example.com"))); const feedbackSection = /*#__PURE__*/ React.createElement("div", { id: "feedback", className: `${darkModeClasses}`, __source: { fileName: "", lineNumber: 73, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-roboto mb-2", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, "Feedback"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleFormSubmit, className: "flex flex-col", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "feedback", className: "border p-2 mb-4 font-roboto", placeholder: "Enter your feedback...", value: feedback, onChange: handleFeedbackChange, __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded font-roboto hover:bg-blue-700", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, "Submit Feedback"))); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 91, columnNumber: 5 }, __self: this }, navigationBar, /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, contactSection, feedbackSection), generatedPDF && /*#__PURE__*/ React.createElement("iframe", { src: generatedPDF, className: "w-full h-[500px]", title: "Generated PDF", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this })); }