function MainComponent() { const [formData, setFormData] = React.useState({ full_name: "", email: "", password: "", genres: [], borrower_id: Math.random().toString(36).substr(2, 9) }); const [toast, setToast] = React.useState(null); const genres = [ "Fiction", "Mystery", "Romance", "Science Fiction", "Fantasy", "Biography", "History", "Self-Help", "Children's", "Young Adult", "Business", "Poetry" ]; const showToast = (title, description, variant)=>{ setToast({ title, description, variant }); setTimeout(()=>setToast(null), 3000); }; const handleSubmit = async (e)=>{ e.preventDefault(); try { const checkResponse = await fetch("/api/db/borrower-database", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `borrowers` WHERE `email` = ?", values: [ formData.email ] }) }); const existingBorrower = await checkResponse.json(); if (existingBorrower.length > 0) { showToast("Account exists", "Please login with your existing account", "error"); return; } const response = await fetch("/api/db/borrower-database", { method: "POST", body: JSON.stringify({ query: `INSERT INTO \`borrowers\` ( \`borrower_id\`, \`full_name\`, \`email\`, \`password\`, \`genres\` ) VALUES (?, ?, ?, ?, ?)`, values: [ formData.borrower_id, formData.full_name, formData.email, formData.password, JSON.stringify(formData.genres) ] }) }); if (response.ok) { showToast("Success!", "Your borrower account has been created.", "success"); } } catch (err) { showToast("Error", "Something went wrong. Please try again.", "error"); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-cyan-50 to-white p-8", __source: { fileName: "", lineNumber: 88, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-lg shadow-lg p-8", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2 mb-8", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-cyan-700", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "Become a Borrower"), /*#__PURE__*/ React.createElement("p", { className: "text-slate-500", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "Join our community of book lovers")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "full_name", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "Full Name"), /*#__PURE__*/ React.createElement("input", { id: "full_name", name: "full_name", type: "text", required: true, className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-500", value: formData.full_name, onChange: (e)=>setFormData((prev)=>({ ...prev, full_name: e.target.value })), __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { id: "email", name: "email", type: "email", required: true, className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-500", value: formData.email, onChange: (e)=>setFormData((prev)=>({ ...prev, email: e.target.value })), __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "password", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { id: "password", name: "password", type: "password", required: true, className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-500", value: formData.password, onChange: (e)=>setFormData((prev)=>({ ...prev, password: e.target.value })), __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }, "Preferred Book Genres"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-2", __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this }, genres.map((genre)=>/*#__PURE__*/ React.createElement("button", { key: genre, type: "button", className: `px-4 py-2 text-sm font-medium rounded-md ${formData.genres.includes(genre) ? "bg-cyan-600 text-white" : "bg-white text-gray-700 border border-gray-300"}`, onClick: ()=>{ setFormData((prev)=>({ ...prev, genres: prev.genres.includes(genre) ? prev.genres.filter((g)=>g !== genre) : [ ...prev.genres, genre ] })); }, __source: { fileName: "", lineNumber: 164, columnNumber: 17 }, __self: this }, genre)))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-cyan-600 text-white py-2 px-4 rounded-md hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-cyan-500", __source: { fileName: "", lineNumber: 187, columnNumber: 11 }, __self: this }, "Create Account")), /*#__PURE__*/ React.createElement("a", { href: "https://tryrealsify.online/book-share-login-page", target: "_self", __source: { fileName: "", lineNumber: 195, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-center", __source: { fileName: "", lineNumber: 196, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-cyan-600 hover:text-cyan-700", __source: { fileName: "", lineNumber: 197, columnNumber: 13 }, __self: this }, "Already have an account?"))), toast && /*#__PURE__*/ React.createElement("div", { className: `fixed bottom-4 right-4 p-4 rounded-md shadow-lg ${toast.variant === "error" ? "bg-red-500" : "bg-green-500"} text-white`, __source: { fileName: "", lineNumber: 204, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 209, columnNumber: 13 }, __self: this }, toast.title), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 210, columnNumber: 13 }, __self: this }, toast.description)))); }