function DatePickerWithCalendar({ eventDate, onDateChange }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full p-2 border rounded relative", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", name: "eventDate", id: "eventDate", value: eventDate, onChange: onDateChange, className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute right-2 top-2", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calendar font-crimson-text", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }))); } function DatePickerWithCalendarStory() { const [eventDate, setEventDate] = React.useState(""); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DatePickerWithCalendar, { eventDate: eventDate, onDateChange: (e)=>setEventDate(e.target.value), __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this })); } function MainComponent() { const [eventName, setEventName] = React.useState(""); const [eventDate, setEventDate] = React.useState(""); const [eventLocation, setEventLocation] = React.useState(""); const [eventId, setEventId] = React.useState(""); const handleEventNameChange = (e)=>setEventName(e.target.value); const handleEventLocationChange = (e)=>setEventLocation(e.target.value); const handleFormSubmit = (e)=>{ e.preventDefault(); const newEventId = Math.random().toString(36).substr(2, 9); setEventId(newEventId); alert(`イベントが登録されました。イベントID: ${newEventId}`); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-r from-red-500 via-yellow-500 to-blue-500 flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-md w-[400px]", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "イベントの登録"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleFormSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "eventName", className: "block text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, "イベント名"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "eventName", name: "eventName", value: eventName, onChange: handleEventNameChange, className: "mt-1 block w-full p-2 border rounded", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(DatePickerWithCalendar, { eventDate: eventDate, onDateChange: (e)=>setEventDate(e.target.value), __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "eventLocation", className: "block text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "場所"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "eventLocation", name: "eventLocation", value: eventLocation, onChange: handleEventLocationChange, className: "mt-1 block w-full p-2 border rounded", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-roboto py-2 px-4 rounded", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "登録"))), eventId && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-lg font-roboto text-green-600", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "イベントID: ", eventId))); }