function MainComponent() { const [email, setEmail] = React.useState(''); const [password, setPassword] = React.useState(''); const [isLoggedIn, setIsLoggedIn] = React.useState(false); const [showNotification, setShowNotification] = React.useState(false); const [selectedNewsCategory, setSelectedNewsCategory] = React.useState(null); const [videos, setVideos] = React.useState([]); const [currentVideo, setCurrentVideo] = React.useState(null); const handleEmailChange = (event)=>setEmail(event.target.value); const handlePasswordChange = (event)=>setPassword(event.target.value); const handleSignIn = (event)=>{ event.preventDefault(); setIsLoggedIn(true); setShowNotification(true); }; const handleSignOut = ()=>{ setIsLoggedIn(false); setEmail(''); setPassword(''); }; const handleAccountCreation = (event)=>{ event.preventDefault(); setIsLoggedIn(true); }; const handleCategorySelect = (category)=>setSelectedNewsCategory(category); const playVideo = (video)=>setCurrentVideo(video); const newsCategories = [ 'World', 'Politics', 'Business', 'Technology', 'Health', 'Entertainment', 'Sports' ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-[#f4f4f4]", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full px-10 py-5 flex justify-between items-center bg-[#e0e0e0]", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-xl text-[#333]", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "BrainologyByMichael"), /*#__PURE__*/ React.createElement("nav", { className: "space-x-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, isLoggedIn ? /*#__PURE__*/ React.createElement("button", { className: "px-3 py-2 bg-[#333] text-white font-medium", onClick: handleSignOut, __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Sign Out") : /*#__PURE__*/ React.createElement("button", { className: "px-3 py-2 bg-[#333] text-white font-medium", onClick: handleSignIn, __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "Sign In"))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 w-full", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, isLoggedIn && /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 w-full md:w-1/2 lg:w-1/3", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, currentVideo && /*#__PURE__*/ React.createElement("video", { controls: true, src: currentVideo, className: "w-full", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around mt-4", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, newsCategories.map((category)=>/*#__PURE__*/ React.createElement("button", { key: category, className: "px-3 py-1 bg-[#ddd] text-[#333] font-light", onClick: ()=>handleCategorySelect(category), __source: { fileName: "", lineNumber: 59, columnNumber: 19 }, __self: this }, category)))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, ` @keyframes slideInFromLeft { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } `), showNotification && /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 left-4 p-3 bg-[#333] text-white", style: { animation: '1s ease-out 0s 1 slideInFromLeft' }, __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, "New stories available in ", selectedNewsCategory || 'all categories', "!"), !isLoggedIn && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "bg-white p-6", onSubmit: handleSignIn, __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#333] font-medium mb-2", htmlFor: "email", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", id: "email", name: "email", className: "w-full px-3 py-2 border", value: email, onChange: handleEmailChange, __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#333] font-medium mb-2", htmlFor: "password", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { type: "password", id: "password", name: "password", className: "w-full px-3 py-2 border", value: password, onChange: handlePasswordChange, __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-3 py-2 bg-[#333] text-white font-medium", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, "Sign In"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "px-3 py-2 bg-[#555] text-white font-medium", onClick: handleAccountCreation, __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, "Create Account"))))); }