function MainComponent() { const [isShortForm, setIsShortForm] = React.useState(true); const toggleContent = ()=>setIsShortForm(!isShortForm); const shortFormContent = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center space-y-4", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, Array.from({ length: 5 }).map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-[300px] md:w-[400px] h-[400px] bg-[#010101]", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("video", { controls: true, className: "w-full h-full", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: `/short-shrek-${index + 1}.mp4`, type: "video/mp4", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }), "Your browser does not support the video tag.")))); const longFormContent = /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, Array.from({ length: 5 }).map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-full mb-8", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("video", { controls: true, className: "w-full", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: `/long-shrek-${index + 1}.mp4`, type: "video/mp4", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }), "Your browser does not support the video tag.")))); const content = isShortForm ? shortFormContent : longFormContent; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto min-h-screen bg-green-700 text-white", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "fixed top-0 h-full w-16 m-0 flex flex-col bg-[#145214] shadow-lg", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-16 w-16 flex items-center justify-center", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-3xl", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "🧟‍♂️")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `w-12 h-12 mb-4 ${isShortForm ? "text-yellow-300" : "text-white"} transition duration-300`, onClick: ()=>setIsShortForm(true), __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "🎞️")), /*#__PURE__*/ React.createElement("button", { className: `w-12 h-12 ${!isShortForm ? "text-yellow-300" : "text-white"} transition duration-300`, onClick: ()=>setIsShortForm(false), __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "🎬"))), /*#__PURE__*/ React.createElement("div", { className: "h-16 w-16", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("header", { className: "ml-16 p-4 flex justify-between items-center bg-[#145214]", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-3xl", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "ShrekTV")), /*#__PURE__*/ React.createElement("main", { className: "ml-16 my-8", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-4 text-xl text-center", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, isShortForm ? "Short Shrek Clips" : "Long Shrek Films"), content)); }