function MainComponent() { const [currentScreen, setCurrentScreen] = React.useState("home"); let content; if (currentScreen === "home") { content = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen justify-between", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-6xl font-bold font-roboto text-center m-auto", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, "Mantletop"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-0 absolute bottom-0 w-full h-[20%]", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "greetingCards", className: "bg-[#f4f4f4] text-black font-roboto rounded-lg flex flex-col items-center justify-center", onClick: ()=>setCurrentScreen("greetingCards"), __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Greeting Cards", /*#__PURE__*/ React.createElement("i", { className: "fa fa-envelope mt-2", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { name: "invites", className: "bg-[#f4f4f4] text-black font-roboto rounded-lg flex flex-col items-center justify-center", onClick: ()=>setCurrentScreen("invites"), __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Invites", /*#__PURE__*/ React.createElement("i", { className: "fa fa-envelope-open-text mt-2", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { name: "giftCards", className: "bg-[#f4f4f4] text-black font-roboto rounded-lg flex flex-col items-center justify-center", onClick: ()=>setCurrentScreen("giftCards"), __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Gift Cards", /*#__PURE__*/ React.createElement("i", { className: "fa fa-gift mt-2", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { name: "profile", className: "bg-[#f4f4f4] text-black font-roboto rounded-lg flex flex-col items-center justify-center", onClick: ()=>setCurrentScreen("profile"), __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Profile", /*#__PURE__*/ React.createElement("i", { className: "fa fa-user mt-2", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this })))); } else if (currentScreen === "greetingCards") { content = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Occasion"), /*#__PURE__*/ React.createElement("input", { type: "search", name: "occasion", className: "border rounded ml-2 p-2", list: "occasion-options", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("datalist", { id: "occasion-options", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Relationship"), /*#__PURE__*/ React.createElement("input", { type: "search", name: "relationship", className: "border rounded ml-2 p-2", list: "relationship-options", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("datalist", { id: "relationship-options", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "Gender"), /*#__PURE__*/ React.createElement("input", { type: "search", name: "gender", className: "border rounded ml-2 p-2", list: "gender-options", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("datalist", { id: "gender-options", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Age"), /*#__PURE__*/ React.createElement("input", { type: "search", name: "age", className: "border rounded ml-2 p-2", list: "age-options", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("datalist", { id: "age-options", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { name: "exploreGreetingCards", type: "submit", className: "block bg-[#f4f4f4] text-black font-roboto rounded p-2 mt-4 mx-auto", onClick: (e)=>{ e.preventDefault(); setCurrentScreen("greetingCardResults"); }, __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Let's Explore"))); } return /*#__PURE__*/ React.createElement(React.Fragment, null, content); }