function CourseProgressTracker({ courses, handleSubmit, selectedCourse, handleCourseChange, reminderTime, handleReminderTimeChange, remindersContent }) { return /*#__PURE__*/ React.createElement("div", { className: "font-poppins bg-gradient-to-b from-[#dbe1ff] to-[#a7bfe8] min-h-screen flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-extrabold text-[#2c3e50] mb-12", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, "Course Progress Tracker"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-white rounded-lg shadow-xl p-6 mb-8", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, courses.map((course)=>/*#__PURE__*/ React.createElement("div", { key: course.id, className: "mb-4 p-4 bg-[#f0f9ff] rounded-lg border-l-4 border-solid shadow-sm", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl font-medium", __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }, course.title), /*#__PURE__*/ React.createElement("span", { className: `${course.color} text-lg font-bold`, __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, course.completion))))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, autoComplete: "off", className: "w-full max-w-[600px] bg-white shadow-xl rounded-lg p-6", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#2c3e50] mb-6", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Set A Reminder 🗓️"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "courseSelector", className: "text-lg font-medium text-[#2c3e50]", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Select Course"), /*#__PURE__*/ React.createElement("div", { className: "relative mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("select", { id: "courseSelector", name: "course", value: selectedCourse, onChange: handleCourseChange, className: "block w-full bg-[#f8f9fa] border border-[#ced4da] text-gray-700 py-3 px-4 rounded-lg leading-tight focus:outline-none focus:border-[#a5b1c2]", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, "Select a course..."), courses.map((course)=>/*#__PURE__*/ React.createElement("option", { key: course.id, value: course.id, __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, course.title))), /*#__PURE__*/ React.createElement("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "reminderTime", className: "text-lg font-medium text-[#2c3e50]", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Reminder Time"), /*#__PURE__*/ React.createElement("input", { type: "datetime-local", id: "reminderTime", name: "reminderTime", value: reminderTime, onChange: handleReminderTimeChange, className: "block w-full bg-[#f8f9fa] border border-[#ced4da] text-gray-700 py-3 px-4 rounded-lg leading-tight focus:outline-none focus:border-[#a5b1c2]", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#4e9af1] hover:bg-[#3b82f6] text-white font-bold py-2 px-4 rounded-lg focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "Set Reminder")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] mt-8", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, remindersContent), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, ` @keyframes showReminders { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .animate-showReminders { animation: showReminders 0.6s ease-in-out forwards; } @keyframes showNoReminders { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } } .animate-showNoReminders { animation: showNoReminders 0.6s ease-in-out forwards; } `)); } function CourseProgressTrackerStory() { const sampleCourses = [ { id: 1, title: "React Basics", completion: "50%", color: "text-red-500" }, { id: 2, title: "Advanced JavaScript", completion: "30%", color: "text-blue-500" } ]; const sampleRemindersContent = /*#__PURE__*/ React.createElement("div", { className: "animate-showReminders", __source: { fileName: "", lineNumber: 102, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center text-lg font-medium text-[#2c3e50]", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, "You have reminders set for your courses!")); const handleSubmit = (e)=>{ e.preventDefault(); }; const handleCourseChange = ()=>{}; const handleReminderTimeChange = ()=>{}; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 112, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CourseProgressTracker, { courses: sampleCourses, handleSubmit: handleSubmit, selectedCourse: "", handleCourseChange: handleCourseChange, reminderTime: "", handleReminderTimeChange: handleReminderTimeChange, remindersContent: sampleRemindersContent, __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(CourseProgressTracker, { courses: sampleCourses, handleSubmit: handleSubmit, selectedCourse: "1", handleCourseChange: handleCourseChange, reminderTime: "2023-05-01T09:00", handleReminderTimeChange: handleReminderTimeChange, remindersContent: sampleRemindersContent, __source: { fileName: "", lineNumber: 122, columnNumber: 7 }, __self: this })); } function MainComponent() { const [selectedCourse, setSelectedCourse] = React.useState(''); const [reminderTime, setReminderTime] = React.useState(''); const [reminders, setReminders] = React.useState([]); const courses = [ { id: 'learn-nextjs', title: 'Learn Next.js', completion: '45%', color: 'text-green-600' }, { id: 'tailwindcss', title: 'Master TailwindCSS', completion: '20%', color: 'text-yellow-500' }, { id: 'react-hooks', title: 'Advanced React Hooks', completion: '10%', color: 'text-red-500' } ]; const handleCourseChange = (event)=>{ setSelectedCourse(event.target.value); }; const handleReminderTimeChange = (event)=>{ setReminderTime(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); if (selectedCourse && reminderTime) { setReminders([ ...reminders, { course: selectedCourse, reminderTime } ]); setSelectedCourse(''); setReminderTime(''); } }; const remindersContent = reminders.length > 0 ? /*#__PURE__*/ React.createElement("div", { className: "animate-showReminders", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-[#121212] mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "Reminders"), reminders.map((reminder, index)=>{ const courseTitle = courses.find((course)=>course.id === reminder.course)?.title || ''; return /*#__PURE__*/ React.createElement("p", { key: index, className: "text-gray-600 text-sm md:text-base mb-2", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Reminder for ", courseTitle, " at ", reminder.reminderTime); })) : /*#__PURE__*/ React.createElement("div", { className: "animate-showNoReminders", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-[#121212] mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, "No Reminders Set"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm md:text-base", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, "Set a reminder to stay on track with your courses!")); return /*#__PURE__*/ React.createElement(CourseProgressTracker, { courses: courses, handleSubmit: handleSubmit, selectedCourse: selectedCourse, handleCourseChange: handleCourseChange, reminderTime: reminderTime, handleReminderTimeChange: handleReminderTimeChange, remindersContent: remindersContent, __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }); }