function MainComponent() { const headerContent = /*#__PURE__*/ React.createElement("header", { className: "flex items-center justify-between p-4 bg-[#1e293b]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-white font-roboto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "My Notebook"), /*#__PURE__*/ React.createElement("button", { className: "text-white bg-[#3b82f6] hover:bg-[#2563eb] p-2 rounded-md font-roboto", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, "New Note")); const searchBox = /*#__PURE__*/ React.createElement("div", { className: "flex border-2 border-[#d1d5db] p-1 rounded-md my-4 mx-4", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "p-2 w-full text-gray-700 font-roboto", type: "text", placeholder: "Search notes...", name: "searchNotes", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-2 text-gray-500 bg-transparent", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-search", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }))); const notebookGrid = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 m-4"; const noteList = /*#__PURE__*/ React.createElement("div", { className: notebookGrid, __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col bg-white rounded-md shadow-lg p-6 m-2", style: { animation: 'slideInFromLeft 0.5s ease-out' }, __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "Mar 10, 2023"), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold font-roboto mt-2", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "Note Title"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 mt-2 font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-auto pt-4", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-xs font-bold text-[#3b82f6] font-roboto uppercase", style: { animation: 'pulse 1.5s infinite ease-in-out' }, __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "VIEW NOTE")))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, headerContent, /*#__PURE__*/ React.createElement("main", { className: "container mx-auto", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, searchBox, noteList), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, ` @keyframes slideInFromLeft { 0% { transform: translateX(-100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } `)); }