function DobInputComponent({ onChange }) { return /*#__PURE__*/ React.createElement("input", { type: "date", name: "dob", className: "border rounded-md p-2", onChange: (e)=>onChange(e.target.value), __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function DobInputComponentStory() { const handleAgeVerification = (dateOfBirth)=>{ console.log("Verifying age with date of birth: ", dateOfBirth); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DobInputComponent, { onChange: handleAgeVerification, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent() { const [isVerified, setIsVerified] = React.useState(false); const [isProfileComplete, setIsProfileComplete] = React.useState(false); const verifyAge = (dob)=>{ const birthDate = new Date(dob); const today = new Date(); const age = today.getFullYear() - birthDate.getFullYear(); const m = today.getMonth() - birthDate.getMonth(); setIsVerified(m < 0 || m === 0 && today.getDate() < birthDate.getDate() ? age <= 18 : age < 18); }; const profileSubmission = (event)=>{ event.preventDefault(); setIsProfileComplete(true); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FAF9F6] text-[#333] font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center p-4 bg-[#FFDDC1]", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Sparkmate")), !isVerified ? /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Verify your age to join Sparkmate"), /*#__PURE__*/ React.createElement(DobInputComponent, { onChange: verifyAge, __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this })) : !isProfileComplete ? /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: profileSubmission, className: "space-y-4", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", className: "w-full border rounded-md p-2", required: true, __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "description", className: "block", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, "Describe Yourself"), /*#__PURE__*/ React.createElement("textarea", { name: "description", className: "w-full border rounded-md p-2", required: true, __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "hobbies", className: "block", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "Hobbies and Interests"), /*#__PURE__*/ React.createElement("select", { multiple: true, name: "hobbies", className: "w-full border rounded-md p-2", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "movies", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, "Movies"), /*#__PURE__*/ React.createElement("option", { value: "books", __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, "Books"), /*#__PURE__*/ React.createElement("option", { value: "sports", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, "Sports"), /*#__PURE__*/ React.createElement("option", { value: "gaming", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, "Gaming"), /*#__PURE__*/ React.createElement("option", { value: "travel", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, "Travel"), /*#__PURE__*/ React.createElement("option", { value: "music", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, "Music"), /*#__PURE__*/ React.createElement("option", { value: "cooking", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, "Cooking"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "lookingFor", className: "block", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "I am looking for"), /*#__PURE__*/ React.createElement("select", { name: "lookingFor", className: "w-full border rounded-md p-2", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "friendship", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, "Friendship"), /*#__PURE__*/ React.createElement("option", { value: "relationship", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, "Relationship"), /*#__PURE__*/ React.createElement("option", { value: "casual", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, "Casual"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "profilePic", className: "block", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, "Profile Picture"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "profilePic", accept: "image/*", className: "border rounded-md p-2", required: true, __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#4CAF50] text-white p-2 rounded-md", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "Complete Profile"))) : /*#__PURE__*/ React.createElement("div", { className: "text-center p-4", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Welcome to Sparkmate"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "Your profile is complete. Start meeting new people!"))); }