function MainComponent() { const [isAuthenticated, setIsAuthenticated] = React.useState(false); const [user, setUser] = React.useState({ name: "Mella", photo: "path/to/photo.jpg", job: "Rental Manager", location: "London, UK", birthdate: "April 1, 1988" }); const [showLogin, setShowLogin] = React.useState(false); const [showSignUp, setShowSignUp] = React.useState(false); const [showMarketPlace, setShowMarketPlace] = React.useState(false); const [users, setUsers] = React.useState([ { name: 'John Doe', service: 'Job: Electrician' }, { name: 'Jane Smith', service: 'Product: Bicycle for sale' }, { name: 'Addis Alemayehu', service: 'Job: Driver' }, { name: 'Marta Tesfaye', service: 'Job: Designer' }, { name: 'Tefera Abera', service: 'Product: Furniture for sale' } ]); const [products, setProducts] = React.useState([ { name: 'Coffee', description: 'Organic Ethiopian coffee', price: '15$', location: 'Addis Ababa', img: 'path/to/coffee.jpg' }, { name: 'Injera', description: 'Traditional Ethiopian flatbread', price: '5$', location: 'Gondar', img: 'path/to/injera.jpg' }, { name: 'Shiro', description: 'Ethiopian chickpea stew', price: '10$', location: 'Bahir Dar', img: 'path/to/shiro.jpg' }, { name: 'Basket', description: 'Handwoven basket', price: '20$', location: 'Hawassa', img: 'path/to/basket.jpg' }, { name: 'Scarf', description: 'Handmade cotton scarf', price: '25$', location: 'Dire Dawa', img: 'path/to/scarf.jpg' } ]); const handleLogin = (e)=>{ e.preventDefault(); setIsAuthenticated(true); setShowLogin(false); setUser({ name: 'Mella', photo: "path/to/photo.jpg", job: "Rental Manager", location: "London, UK", birthdate: "April 1, 1988" }); }; const handleSignUp = (e)=>{ e.preventDefault(); setIsAuthenticated(true); setShowSignUp(false); setUser({ name: 'Mella', photo: "path/to/photo.jpg", job: "Rental Manager", location: "London, UK", birthdate: "April 1, 1988" }); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-blue-700 text-white p-4 font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Mella"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 43, columnNumber: 19 }, __self: this }, "Mella")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 44, columnNumber: 19 }, __self: this }, "Tasks")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 45, columnNumber: 19 }, __self: this }, "Workers")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", onClick: ()=>setShowMarketPlace(true), __source: { fileName: "", lineNumber: 46, columnNumber: 19 }, __self: this }, "Add Listing")), isAuthenticated ? /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", onClick: ()=>setIsAuthenticated(false), __source: { fileName: "", lineNumber: 48, columnNumber: 21 }, __self: this }, "Logout")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 51, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", onClick: ()=>setShowLogin(true), __source: { fileName: "", lineNumber: 51, columnNumber: 23 }, __self: this }, "Login")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 52, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", onClick: ()=>setShowSignUp(true), __source: { fileName: "", lineNumber: 52, columnNumber: 23 }, __self: this }, "Sign Up"))))))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto p-4 flex flex-wrap", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, isAuthenticated && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 mb-4 rounded shadow w-full lg:w-1/4", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "My Profile"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: user.photo, alt: "User Profile photo", className: "w-[50px] h-[50px] rounded-full mr-4", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto font-bold", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, user.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, user.job), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, user.location), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, user.birthdate))), /*#__PURE__*/ React.createElement("button", { className: "w-full text-left text-blue-700 hover:underline", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "My Listings"), /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 72, columnNumber: 100 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full text-left text-blue-700 hover:underline", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "My Tasks"), /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 73, columnNumber: 97 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full text-left text-blue-700 hover:underline", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "My Workers")), /*#__PURE__*/ React.createElement("div", { className: "w-full lg:w-3/4 p-2 space-y-4", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold font-roboto mb-2", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Tasks"), /*#__PURE__*/ React.createElement("div", { className: "mb-4 border-b pb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/avatar.jpg", alt: "User avatar", className: "w-[24px] h-[24px] rounded-full mr-2", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, "Task: Clean my house")), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, "Looking for someone to clean my house on weekends. Must bring own supplies."), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-700 text-white py-1 px-4 rounded hover:bg-blue-800", __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }, "Interested"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-700 text-white py-1 px-4 rounded hover:bg-green-800", __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }, "Comment"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4 border-b pb-4", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/avatar.jpg", alt: "User avatar", className: "w-[24px] h-[24px] rounded-full mr-2", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, "Task: Paint my fence")), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }, "Need a painter to paint my backyard fence. Payment negotiable based on experience."), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-700 text-white py-1 px-4 rounded hover:bg-blue-800", __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }, "Interested"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-700 text-white py-1 px-4 rounded hover:bg-green-800", __source: { fileName: "", lineNumber: 100, columnNumber: 17 }, __self: this }, "Comment"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4 border-b pb-4", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/avatar.jpg", alt: "User avatar", className: "w-[24px] h-[24px] rounded-full mr-2", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }, "Task: Fix my sink")), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, "Looking for a plumber to fix a leaking sink. Immediate assistance needed."), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-700 text-white py-1 px-4 rounded hover:bg-blue-800", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }, "Interested"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-700 text-white py-1 px-4 rounded hover:bg-green-800", __source: { fileName: "", lineNumber: 112, columnNumber: 17 }, __self: this }, "Comment")))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold font-roboto mb-2", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, "Upcoming Events"), /*#__PURE__*/ React.createElement("div", { className: "mb-4 border-b pb-4", __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/event.jpg", alt: "Event image", className: "w-full h-auto mb-2", __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mb-2 font-bold", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, "Holiday"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this }, "Friday 15:00"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-200 text-black py-1 px-4 rounded mt-2 hover:bg-gray-300", __source: { fileName: "", lineNumber: 122, columnNumber: 15 }, __self: this }, "Info"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold font-roboto mb-2", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, "My Listings"), /*#__PURE__*/ React.createElement("div", { className: "mb-4 border-b pb-4", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/listing.jpg", alt: "Listing image", className: "w-full h-auto mb-2", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mb-2 font-bold", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }, "House in London"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 130, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-green-700 text-white py-1 px-4 rounded hover:bg-green-800", __source: { fileName: "", lineNumber: 131, columnNumber: 17 }, __self: this }, "View"), /*#__PURE__*/ React.createElement("button", { className: "bg-red-700 text-white py-1 px-4 rounded hover:bg-red-800", __source: { fileName: "", lineNumber: 132, columnNumber: 17 }, __self: this }, "Delete"))))), /*#__PURE__*/ React.createElement("aside", { className: "w-full lg:w-1/4 p-2 space-y-4", __source: { fileName: "", lineNumber: 137, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, "Marketplace"), products.map((product, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 141, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.img, alt: `Product image of ${product.name}`, className: "w-full h-auto mb-2", __source: { fileName: "", lineNumber: 142, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 143, columnNumber: 17 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 144, columnNumber: 17 }, __self: this }, product.description), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 145, columnNumber: 17 }, __self: this }, product.price), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }, product.location)))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 150, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 151, columnNumber: 13 }, __self: this }, "Best Deals Around You"), users.map((user, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-2", __source: { fileName: "", lineNumber: 153, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 154, columnNumber: 17 }, __self: this }, user.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 155, columnNumber: 17 }, __self: this }, user.service)))))), showLogin && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 162, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow w-[300px]", __source: { fileName: "", lineNumber: 163, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold font-roboto mb-2", __source: { fileName: "", lineNumber: 164, columnNumber: 13 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleLogin, __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "username", type: "text", className: "w-full p-2 border rounded mb-2", placeholder: "Username", __source: { fileName: "", lineNumber: 166, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "password", type: "password", className: "w-full p-2 border rounded mb-2", placeholder: "Password", __source: { fileName: "", lineNumber: 167, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 168, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-700 text-white py-1 px-4 rounded hover:bg-blue-800", __source: { fileName: "", lineNumber: 169, columnNumber: 17 }, __self: this }, "Login"))))), showSignUp && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 176, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow w-[300px]", __source: { fileName: "", lineNumber: 177, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold font-roboto mb-2", __source: { fileName: "", lineNumber: 178, columnNumber: 13 }, __self: this }, "Sign Up"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSignUp, __source: { fileName: "", lineNumber: 179, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "username", type: "text", className: "w-full p-2 border rounded mb-2", placeholder: "Username", __source: { fileName: "", lineNumber: 180, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "password", type: "password", className: "w-full p-2 border rounded mb-2", placeholder: "Password", __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 182, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-700 text-white py-1 px-4 rounded hover:bg-blue-800", __source: { fileName: "", lineNumber: 183, columnNumber: 17 }, __self: this }, "Sign Up"))))), showMarketPlace && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 190, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow w-[500px] max-h-[80vh] overflow-auto", __source: { fileName: "", lineNumber: 191, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 192, columnNumber: 13 }, __self: this }, "Marketplace"), products.map((product, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 194, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.img, alt: `Product image of ${product.name}`, className: "w-full h-auto mb-2", __source: { fileName: "", lineNumber: 195, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 196, columnNumber: 17 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 197, columnNumber: 17 }, __self: this }, product.description), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 198, columnNumber: 17 }, __self: this }, product.price), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 199, columnNumber: 17 }, __self: this }, product.location))), /*#__PURE__*/ React.createElement("button", { className: "bg-red-700 text-white py-1 px-4 rounded hover:bg-red-800", onClick: ()=>setShowMarketPlace(false), __source: { fileName: "", lineNumber: 202, columnNumber: 13 }, __self: this }, "Close"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 206, columnNumber: 7 }, __self: this }, ` @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); .font-roboto { font-family: 'Roboto', sans-serif; } `)); }