function MainComponent() { const [loading, setLoading] = React.useState(false); const [summary, setSummary] = React.useState(""); const handleBellClick = async ()=>{ setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: 'Provide a very brief, 1-2 sentence historical summary of Nike Kobe 8 Protro Venice Beach (2024), including the most important or interesting fact or its relevance in pop culture.' } ], system_prompt: 'Explain this content briefly' }) }); const result = await response.json(); const content = result.choices[0].message.content; setSummary(content); setLoading(false); document.getElementById('summary-box').style.display = 'block'; }; const handleCloseClick = ()=>{ document.getElementById('summary-box').style.display = 'none'; }; return /*#__PURE__*/ React.createElement("div", { className: "font-sans bg-[#F8F8F8] min-h-screen", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-4 bg-white shadow", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "MYNA"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "border border-gray-300 p-2 rounded", placeholder: "Search items...", name: "search", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("nav", { className: "ml-4", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "ml-4 text-gray-700", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "BROWSE ALL SHOES"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "ml-4 text-gray-700", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "HELP"), /*#__PURE__*/ React.createElement("button", { className: "ml-4 px-4 py-2 bg-[#004a60] text-white rounded", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "LOG IN"), /*#__PURE__*/ React.createElement("button", { className: "ml-2 px-4 py-2 border border-[#004a60] text-[#004a60] rounded", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "SIGN UP")))), /*#__PURE__*/ React.createElement("main", { className: "p-8", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "flex", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2 p-4 bg-white rounded shadow", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path-to-image.jpg", alt: "Nike Kobe 8 Protro Venice Beach 2024", className: "w-[400px] h-[400px] object-contain", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mt-4", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-sm text-gray-800 px-2 py-1 mr-2 border rounded", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, "My Verified"), /*#__PURE__*/ React.createElement("button", { className: "text-gray-500 text-xl", onClick: handleBellClick, __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bell", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "w-1/2 p-4", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Nike Kobe 8 Protro Venice Beach (2024)"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mt-4", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "py-1 px-3 mr-2 bg-[#00713A] text-white rounded", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, "BUY"), /*#__PURE__*/ React.createElement("button", { className: "py-1 px-3 bg-[#A10000] text-white rounded", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, "SELL")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "size", className: "border p-2 rounded", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "3.5", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, "3.5"), /*#__PURE__*/ React.createElement("option", { value: "4", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, "4"), /*#__PURE__*/ React.createElement("option", { value: "4.5", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, "4.5")), /*#__PURE__*/ React.createElement("button", { className: "ml-4 p-2 border border-[#004a60] rounded", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, "MAKE OFFER")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, "HIGHEST OFFER: 5$"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, "USUALLY SHIPS WITHIN 1 - 3 DAYS")))), /*#__PURE__*/ React.createElement("section", { className: "mt-8 bg-white p-8 rounded shadow", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "Price Data"), /*#__PURE__*/ React.createElement("div", { className: "flex mt-4 space-x-4", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "py-1 px-3 border rounded bg-gray-200", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "Listings"), /*#__PURE__*/ React.createElement("button", { className: "py-1 px-3 border rounded", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "Offers"), /*#__PURE__*/ React.createElement("button", { className: "py-1 px-3 border rounded", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "Sales")), /*#__PURE__*/ React.createElement("table", { className: "w-full mt-4 text-left", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "border-b", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4", __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }, "PRICE"), /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4", __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this }, "SIZE"), /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4", __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }, "EXPIRES"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, "$290.00"), /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4", __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }, "11"), /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }, "in 1 month 19 days")))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-4", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, "VIEW ALL"))), /*#__PURE__*/ React.createElement("section", { className: "mt-8 bg-white p-8 rounded shadow", __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, "Details"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 mt-4 text-left", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, "SKU"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, "FQ3548-001")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }, "RELEASE DATE"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 124, columnNumber: 15 }, __self: this }, "April 13, 2024")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, "RETAIL PRICE"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }, "$180"))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-black text-white p-8", __source: { fileName: "", lineNumber: 134, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 135, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-4", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, "SELL WITH US"), /*#__PURE__*/ React.createElement("p", { className: "mb-2 text-sm", __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }, "HOW TO SELL"), /*#__PURE__*/ React.createElement("p", { className: "mb-2 text-sm", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, "VAULT YOUR ITEMS"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }, "MYNA VERIFIED")), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 142, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-4", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, "FOLLOW US"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-twitter", __source: { fileName: "", lineNumber: 145, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-instagram", __source: { fileName: "", lineNumber: 146, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-discord", __source: { fileName: "", lineNumber: 147, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-8 text-sm", __source: { fileName: "", lineNumber: 151, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }, "HELP"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, "PRIVACY"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 154, columnNumber: 11 }, __self: this }, "TERMS")), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-4 text-xs text-gray-500", __source: { fileName: "", lineNumber: 156, columnNumber: 9 }, __self: this }, "© MYNA 2024")), /*#__PURE__*/ React.createElement("div", { id: "summary-box", className: "hidden fixed inset-0 bg-white p-4 shadow-xl md:inset-y-1/3 md:inset-x-1/3 rounded lg:p-8 lg:inset-y-1/4 lg:inset-x-1/4", __source: { fileName: "", lineNumber: 159, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 160, columnNumber: 9 }, __self: this }, "Historical Summary"), loading ? /*#__PURE__*/ React.createElement("p", { className: "mt-4", __source: { fileName: "", lineNumber: 162, columnNumber: 11 }, __self: this }, "Loading...") : /*#__PURE__*/ React.createElement("p", { className: "mt-4", id: "summary-content", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, summary), /*#__PURE__*/ React.createElement("button", { className: "mt-4 py-2 px-4 bg-red-600 text-white rounded", onClick: handleCloseClick, __source: { fileName: "", lineNumber: 166, columnNumber: 9 }, __self: this }, "Close")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 169, columnNumber: 7 }, __self: this }, ` #summary-box { display: none; } `)); }