function MainComponent() { const [isLoggedIn, setIsLoggedIn] = React.useState(false); const handleLogin = ()=>setIsLoggedIn(true); const handleLogout = ()=>setIsLoggedIn(false); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-gray-200 min-h-screen", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-cover bg-center h-[300px] flex items-center justify-center", style: { backgroundImage: "url('/path/to/berlin-streetart.jpg')" }, __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl text-white font-bold", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "11design Street Art Blog"))), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 flex justify-end", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: isLoggedIn ? handleLogout : handleLogin, className: "text-white bg-blue-500 px-4 py-2 rounded", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, isLoggedIn ? "Logout" : "Login")), isLoggedIn && /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 text-center", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "mt-4 text-white bg-green-500 px-4 py-2 rounded", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "New Article")), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 flex flex-col items-center", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow-md w-full max-w-[800px] mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Article Title 1"), /*#__PURE__*/ React.createElement("img", { src: "/path/to/image1.jpg", alt: "Street art example 1", className: "w-full h-auto", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "This is a short description of the street art."), /*#__PURE__*/ React.createElement("a", { href: "https://example.com", target: "_blank", className: "text-blue-500 mt-2 block", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/preview1.jpg", alt: "Preview of example.com", className: "h-[50px] w-[50px] mr-2", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "https://example.com")))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow-md w-full max-w-[800px] mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Article Title 2"), /*#__PURE__*/ React.createElement("img", { src: "/path/to/image2.jpg", alt: "Street art example 2", className: "w-full h-auto", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "This is another short description of the street art."), /*#__PURE__*/ React.createElement("a", { href: "https://another-example.com", target: "_blank", className: "text-blue-500 mt-2 block", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/preview2.jpg", alt: "Preview of another-example.com", className: "h-[50px] w-[50px] mr-2", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "https://another-example.com")))))); }