function MainComponent() { const categories = [ "Soccer", "Basketball", "Tennis", "Baseball", "Swimming" ]; const [videos, setVideos] = React.useState([]); const [loading, setLoading] = React.useState(false); const [selectedCategory, setSelectedCategory] = React.useState(categories[0]); const [showAccount, setShowAccount] = React.useState(false); React.useEffect(()=>{ fetchVideos(selectedCategory); }, [ selectedCategory ]); function fetchVideos(category) { setLoading(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: `I want videos of ${category} that are around 5-120 seconds long.` } ] }) }).then((response)=>response.json()).then((data)=>{ const videoLinks = data.choices[0].message.content.split(','); setVideos(videoLinks); setLoading(false); }); } return /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text min-h-screen bg-[#f8f9fa]", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-between items-center py-4 px-8 bg-[#343a40] text-white", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "Sports Reels"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, categories.map((category)=>/*#__PURE__*/ React.createElement("li", { key: category, className: "hover:text-[#d4af37] cursor-pointer", onClick: ()=>{ setSelectedCategory(category); setShowAccount(false); }, __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, category))), /*#__PURE__*/ React.createElement("div", { className: "hover:text-[#d4af37] cursor-pointer", onClick: ()=>setShowAccount(true), __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "My Account"))), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, showAccount ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "My Account"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#343a40] text-white rounded", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "Upload Video")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, videos.map((videoLink, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-[#212529] aspect-w-16 aspect-h-9 rounded-lg relative", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("video", { className: "absolute top-0 left-0 w-full h-full object-cover", controls: true, __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: videoLink, type: "video/mp4", __source: { fileName: "", lineNumber: 58, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 59, columnNumber: 21 }, __self: this }, "Your browser does not support the video tag.")))))) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, loading && /*#__PURE__*/ React.createElement("div", { className: "text-center text-lg", __source: { fileName: "", lineNumber: 67, columnNumber: 25 }, __self: this }, "Loading..."), videos.map((videoLink, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-[#212529] aspect-w-16 aspect-h-9 rounded-lg relative", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("video", { className: "absolute top-0 left-0 w-full h-full object-cover", controls: true, __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: videoLink, type: "video/mp4", __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this }, "Your browser does not support the video tag."))))))); }