function MainComponent() { const [name, setName] = React.useState(''); const [dob, setDob] = React.useState(''); const [birthdays, setBirthdays] = React.useState([]); const { data: session, status } = useSession(); React.useEffect(()=>{ if (status === "authenticated") { fetchBirthdays(); } }, [ status ]); const fetchBirthdays = async ()=>{ const response = await fetch('/api/db/bdays', { method: 'POST', body: JSON.stringify({ query: 'SELECT * FROM `birthdays` WHERE user_id = ?', values: [ session.user.id ] }) }); const data = await response.json(); setBirthdays(data); }; const handleSubmit = async (e)=>{ e.preventDefault(); if (status === "authenticated") { await fetch('/api/db/bdays', { method: 'POST', body: JSON.stringify({ query: 'INSERT INTO `birthdays` (name, date_of_birth, user_id) VALUES (?, ?, ?)', values: [ name, dob, session.user.id ] }) }); setName(''); setDob(''); fetchBirthdays(); } }; const handleDelete = async (id)=>{ if (status === "authenticated") { await fetch('/api/db/bdays', { method: 'POST', body: JSON.stringify({ query: 'DELETE FROM `birthdays` WHERE id = ? AND user_id = ?', values: [ id, session.user.id ] }) }); fetchBirthdays(); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-pink-100 to-blue-100 font-roboto", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-md", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-6 flex justify-between items-center", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold text-[#5D4037]", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Birthday Tracker"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, status === "authenticated" ? /*#__PURE__*/ React.createElement("a", { href: "/account/logout", className: "text-[#5D4037] hover:text-[#8D6E63] transition duration-300", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "Sign Out") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "text-[#5D4037] hover:text-[#8D6E63] transition duration-300 mr-4", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, "Sign In"), /*#__PURE__*/ React.createElement("a", { href: "/account/signup", className: "text-[#5D4037] hover:text-[#8D6E63] transition duration-300", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, "Sign Up"))))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-12 text-center", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold text-[#5D4037] mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Never Forget a Birthday Again!"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#795548]", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Keep track of your loved ones' special days with our beautiful and easy-to-use birthday tracker.")), status === "authenticated" ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("section", { className: "bg-white rounded-lg shadow-md p-6 mb-12 w-full max-w-[600px] mx-auto", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-semibold text-[#5D4037] mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, "Add a Birthday"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-[#795548] mb-2", __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "name", name: "name", value: name, onChange: (e)=>setName(e.target.value), className: "w-full px-3 py-2 border border-[#BCAAA4] rounded-md focus:outline-none focus:ring-2 focus:ring-[#8D6E63]", required: true, __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "dob", className: "block text-[#795548] mb-2", __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this }, "Date of Birth"), /*#__PURE__*/ React.createElement("input", { type: "date", id: "dob", name: "dob", value: dob, onChange: (e)=>setDob(e.target.value), className: "w-full px-3 py-2 border border-[#BCAAA4] rounded-md focus:outline-none focus:ring-2 focus:ring-[#8D6E63]", required: true, __source: { fileName: "", lineNumber: 97, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#8D6E63] text-white py-2 px-4 rounded-md hover:bg-[#795548] transition duration-300", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }, "Save"))), /*#__PURE__*/ React.createElement("section", { className: "bg-white rounded-lg shadow-md p-6 w-full max-w-[600px] mx-auto", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-semibold text-[#5D4037] mb-4", __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }, "Saved Birthdays"), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full text-left", __source: { fileName: "", lineNumber: 114, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 115, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-[#EFEBE9]", __source: { fileName: "", lineNumber: 116, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-[#5D4037]", __source: { fileName: "", lineNumber: 117, columnNumber: 23 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-[#5D4037]", __source: { fileName: "", lineNumber: 118, columnNumber: 23 }, __self: this }, "Date of Birth"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-[#5D4037]", __source: { fileName: "", lineNumber: 119, columnNumber: 23 }, __self: this }, "Action"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 122, columnNumber: 19 }, __self: this }, birthdays.map((birthday)=>/*#__PURE__*/ React.createElement("tr", { key: birthday.id, className: "border-b border-[#D7CCC8]", __source: { fileName: "", lineNumber: 124, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2 text-[#795548]", __source: { fileName: "", lineNumber: 125, columnNumber: 25 }, __self: this }, birthday.name), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2 text-[#795548]", __source: { fileName: "", lineNumber: 126, columnNumber: 25 }, __self: this }, new Date(birthday.date_of_birth).toLocaleDateString()), /*#__PURE__*/ React.createElement("td", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 127, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDelete(birthday.id), className: "text-[#D32F2F] hover:text-[#B71C1C] transition duration-300", __source: { fileName: "", lineNumber: 128, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash-alt", __source: { fileName: "", lineNumber: 132, columnNumber: 29 }, __self: this })))))))))) : /*#__PURE__*/ React.createElement("div", { className: "text-center text-[#5D4037] text-xl", __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, "Please sign in or sign up to use the Birthday Tracker."))); }