function CourseDetailsForm({ handleSubmit }) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-6", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto p-4 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center font-crimson-text mb-4", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "Course Material Generator"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium text-gray-700 font-roboto mb-2", htmlFor: "courseSubject", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, "Course Subject"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "courseSubject", name: "courseSubject", className: "w-full px-3 py-2 border border-gray-300 rounded-lg", placeholder: "Enter the subject of the course", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium text-gray-700 font-roboto mb-2", htmlFor: "courseLevel", __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, "Course Level"), /*#__PURE__*/ React.createElement("select", { id: "courseLevel", name: "courseLevel", className: "w-full px-3 py-2 border border-gray-300 rounded-lg", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "beginner", __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }, "Beginner"), /*#__PURE__*/ React.createElement("option", { value: "intermediate", __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }, "Intermediate"), /*#__PURE__*/ React.createElement("option", { value: "advanced", __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this }, "Advanced"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium text-gray-700 font-roboto mb-2", htmlFor: "courseDuration", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, "Course Duration (weeks)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "courseDuration", name: "courseDuration", className: "w-full px-3 py-2 border border-gray-300 rounded-lg", placeholder: "Enter the duration of the course", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium text-gray-700 font-roboto mb-2", htmlFor: "courseDescription", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "Course Description"), /*#__PURE__*/ React.createElement("textarea", { id: "courseDescription", name: "courseDescription", rows: "4", className: "w-full px-3 py-2 border border-gray-300 rounded-lg", placeholder: "Enter a brief description of the course", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-blue-600 text-white font-bold rounded-lg font-roboto hover:bg-blue-700", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Generate Course Materials")))); } function CourseDetailsFormStory() { const handleSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const data = Object.fromEntries(formData.entries()); console.log(data); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CourseDetailsForm, { handleSubmit: handleSubmit, __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this })); } function MainComponent() { const handleSubmit = (e)=>{ e.preventDefault(); const formData = new FormData(e.target); const courseData = { subject: formData.get("courseSubject"), level: formData.get("courseLevel"), duration: formData.get("courseDuration"), description: formData.get("courseDescription") }; console.log(courseData); }; return /*#__PURE__*/ React.createElement(CourseDetailsForm, { handleSubmit: handleSubmit, __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }); }