function PublishDateSelector({ year, month, day, onYearChange, onMonthChange, onDayChange }) { const months = [ { value: 1, label: 'Jun.' }, { value: 2, label: 'Feb.' }, { value: 3, label: 'Mar.' }, { value: 4, label: 'Apr.' }, { value: 5, label: 'May.' }, { value: 6, label: 'Jun.' }, { value: 7, label: 'Jul.' }, { value: 8, label: 'Aug.' }, { value: 9, label: 'Sep.' }, { value: 10, label: 'Oct.' }, { value: 11, label: 'Nov.' }, { value: 12, label: 'Dec.' } ]; const days = Array.from({ length: 31 }, (_, i)=>i + 1); return /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "year", value: year, onChange: onYearChange, className: "border rounded p-2 w-[100px]", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "month", value: month, onChange: onMonthChange, className: "border rounded p-2 w-[100px]", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, months.map((m)=>/*#__PURE__*/ React.createElement("option", { key: m.value, value: m.value, __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, m.label))), /*#__PURE__*/ React.createElement("select", { name: "day", value: day, onChange: onDayChange, className: "border rounded p-2 w-[100px]", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, days.map((d)=>/*#__PURE__*/ React.createElement("option", { key: d, value: d, __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, d)))); } function DateSelector({ year, month, day, onYearChange, onMonthChange, onDayChange }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full p-4 border rounded flex space-x-2", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PublishDateSelector, { year: year, month: month, day: day, onYearChange: onYearChange, onMonthChange: onMonthChange, onDayChange: onDayChange, __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this })); } function DateSelectorStory() { const [year, setYear] = React.useState(2023); const [month, setMonth] = React.useState(6); const [day, setDay] = React.useState(1); const handleYearChange = (e)=>setYear(e.target.value); const handleMonthChange = (e)=>setMonth(e.target.value); const handleDayChange = (e)=>setDay(e.target.value); return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 77, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DateSelector, { year: year, month: month, day: day, onYearChange: handleYearChange, onMonthChange: handleMonthChange, onDayChange: handleDayChange, __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this })); } function CreateButton({ label }) { return /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white p-2 rounded mt-6", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, label); } function CreateButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CreateButton, { label: "Create", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } function MainComponent() { const [authorName, setAuthorName] = React.useState(""); const [webSiteName, setWebSiteName] = React.useState(""); const [webPageName, setWebPageName] = React.useState(""); const [url, setUrl] = React.useState(""); const [publishYear, setPublishYear] = React.useState(2023); const [publishMonth, setPublishMonth] = React.useState(1); const [publishDay, setPublishDay] = React.useState(1); const [accessYear, setAccessYear] = React.useState(2023); const [accessMonth, setAccessMonth] = React.useState(1); const [accessDay, setAccessDay] = React.useState(1); const handleAuthorNameChange = (e)=>setAuthorName(e.target.value); const handleWebSiteNameChange = (e)=>setWebSiteName(e.target.value); const handleWebPageNameChange = (e)=>setWebPageName(e.target.value); const handleUrlChange = (e)=>setUrl(e.target.value); const handlePublishYearChange = (e)=>setPublishYear(e.target.value); const handlePublishMonthChange = (e)=>setPublishMonth(e.target.value); const handlePublishDayChange = (e)=>setPublishDay(e.target.value); const handleAccessYearChange = (e)=>setAccessYear(e.target.value); const handleAccessMonthChange = (e)=>setAccessMonth(e.target.value); const handleAccessDayChange = (e)=>setAccessDay(e.target.value); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#ffffff] p-8 rounded-lg shadow-lg w-[600px] mx-auto mt-10", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-sans mb-6", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, "APA Style Create Kit"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-bold font-sans mb-2", htmlFor: "authorName", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "Author Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "authorName", name: "authorName", value: authorName, onChange: handleAuthorNameChange, className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-bold font-sans mb-2", htmlFor: "webSiteName", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Website Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "webSiteName", name: "webSiteName", value: webSiteName, onChange: handleWebSiteNameChange, className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-bold font-sans mb-2", htmlFor: "webPageName", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "Web Page Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "webPageName", name: "webPageName", value: webPageName, onChange: handleWebPageNameChange, className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-bold font-sans mb-2", htmlFor: "url", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "URL"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "url", name: "url", value: url, onChange: handleUrlChange, className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-bold font-sans mb-2", htmlFor: "publishDate", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "Publish Date"), /*#__PURE__*/ React.createElement(DateSelector, { year: publishYear, month: publishMonth, day: publishDay, onYearChange: handlePublishYearChange, onMonthChange: handlePublishMonthChange, onDayChange: handlePublishDayChange, __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-bold font-sans mb-2", htmlFor: "accessDate", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Access Date"), /*#__PURE__*/ React.createElement(DateSelector, { year: accessYear, month: accessMonth, day: accessDay, onYearChange: handleAccessYearChange, onMonthChange: handleAccessMonthChange, onDayChange: handleAccessDayChange, __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement(CreateButton, { label: "Create", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this })); }