function MainComponent() { const [results, setResults] = React.useState([]); const [query, setQuery] = React.useState(''); const [loading, setLoading] = React.useState(false); const [haiku, setHaiku] = React.useState(''); React.useEffect(()=>{ if (query !== '') { setLoading(true); fetch(`/integrations/google-search/search?q=${encodeURIComponent(query)}`, { method: 'GET' }).then((response)=>response.json()).then((data)=>{ setResults(data.items || []); setLoading(false); }).catch(()=>{ setLoading(false); }); } }, [ query ]); React.useEffect(()=>{ fetch('/integrations/anthropic-claude-haiku/', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: 'Inspire me with a haiku' } ] }), headers: { 'Content-Type': 'application/json' } }).then((response)=>response.json()).then((data)=>{ setHaiku(data.choices[0].message.content); }); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f0f0] font-roboto", style: { animation: 'fadeIn 1s ease-in-out' }, __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#343a40] text-white p-6", style: { animation: 'slideDown 0.5s ease-in-out' }, __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "My Personal Portfolio")), /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { style: { animation: 'slideRight 0.5s ease-in-out' }, __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "About Me"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "I am a passionate developer with a knack for building engaging and innovative web experiences. My journey in tech started with curiosity and has grown into a career filled with learning and exploration.")), /*#__PURE__*/ React.createElement("section", { className: "mt-8", style: { animation: 'slideLeft 0.5s ease-in-out' }, __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Inspiration"), /*#__PURE__*/ React.createElement("blockquote", { className: "italic border-l-4 pl-4", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, haiku)), /*#__PURE__*/ React.createElement("section", { className: "mt-8", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Projects"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "Loading...") : results.map((result, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 shadow rounded", style: { animation: `fadeInUp 0.5s ease-in-out ${index * 0.1}s` }, __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }, result.title), /*#__PURE__*/ React.createElement("a", { href: result.link, className: "text-blue-600 hover:text-blue-800 visited:text-purple-600", __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this }, result.displayLink), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 73, columnNumber: 19 }, __self: this }, result.snippet))))), /*#__PURE__*/ React.createElement("section", { className: "mt-8", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "Contact Me"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: "Your Name", className: "border p-2", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "Your Email", className: "border p-2", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "message", placeholder: "Your Message", className: "border p-2", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#007bff] text-white p-2 rounded", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "Send")))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#343a40] text-white p-6 text-center", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, "© 2023 My Portfolio. All rights reserved.")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes slideRight { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideLeft { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } `)); }