function MainComponent() { const [portfolioData, setPortfolioData] = React.useState(null); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); const [slideIndex, setSlideIndex] = React.useState(0); React.useEffect(()=>{ const fetchPortfolioData = async ()=>{ setLoading(true); try { const response = await fetch('/api/portfolio', { method: 'GET' }); if (!response.ok) { throw new Error('Network response was not ok'); } const data = await response.json(); setPortfolioData(data); } catch (error) { setError(error.message); } finally{ setLoading(false); } }; fetchPortfolioData(); }, []); React.useEffect(()=>{ const interval = setInterval(()=>{ setSlideIndex((current)=>(current + 1) % (portfolioData ? portfolioData.length : 1)); }, 3000); return ()=>clearInterval(interval); }, [ portfolioData ]); const renderSlide = (project, index)=>/*#__PURE__*/ React.createElement("div", { className: `absolute inset-0 transition-opacity duration-700 ease-in-out ${index === slideIndex ? 'opacity-100' : 'opacity-0'}`, __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: project.image, alt: `Project ${project.title} showcase`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this })); let portfolioContent; if (loading) { portfolioContent = /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen", __source: { fileName: "", lineNumber: 45, columnNumber: 24 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-pulse fa-3x text-[#121212]", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this })); } else if (error) { portfolioContent = /*#__PURE__*/ React.createElement("div", { className: "relative py-32 mx-auto w-full h-96", __source: { fileName: "", lineNumber: 49, columnNumber: 24 }, __self: this }, portfolioData && portfolioData.map((project, index)=>renderSlide(project, index))); } else { portfolioContent = /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 53, columnNumber: 24 }, __self: this }, portfolioData && portfolioData.map((project)=>/*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-6", key: project.id, __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: project.image, alt: `Project ${project.title}`, className: "w-full h-48 object-cover rounded-t-lg", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "py-4", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl text-[#121212] font-semibold font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, project.title), /*#__PURE__*/ React.createElement("p", { className: "text-md text-[#666666] font-light font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, project.description))))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#f8f9fa] py-8", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl text-[#121212] font-bold font-roboto text-center", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "IT Professional Portfolio"))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 flex-1", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, portfolioContent), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#343a40] py-6", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center text-md text-white font-light font-roboto", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "© 2023 IT Professional, Inc."))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, ` @keyframes fadeInOut { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } `)); }