function DsToDo2({ tasks, taskInput, setTaskInput, addTask, loading }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full p-4 flex flex-col items-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "task", value: taskInput, onChange: (e)=>setTaskInput(e.target.value), className: "mb-4 p-2 border border-gray-300 rounded w-full max-w-[400px] font-roboto", placeholder: "Enter task description", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: addTask, className: "bg-black text-white px-4 py-2 rounded font-roboto", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, "Add Task"), loading && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 18, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 18, columnNumber: 41 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-8 w-full max-w-[400px]", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, tasks.map((task)=>/*#__PURE__*/ React.createElement("div", { key: task.id, className: "bg-white shadow-md rounded mb-4 overflow-hidden w-full", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: task.image, alt: `Task ${task.name} image`, className: "w-full", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto mb-2", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, task.name), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white px-4 py-2 rounded mr-2 font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, "Complete"), /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 text-white px-4 py-2 rounded font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, "Delete")))))); } function DsToDo2Story() { const [taskInput, setTaskInput] = React.useState(''); const [tasks, setTasks] = React.useState([]); const [loading, setLoading] = React.useState(false); const addTask = ()=>{ setLoading(true); fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(taskInput)}`, { method: 'GET' }).then((response)=>response.json()).then((data)=>{ const imageUrl = data.data[0]; const newTask = { id: new Date().getTime().toString(), name: taskInput, status: 'pending', image: imageUrl, created_at: new Date().toISOString() }; fetch('/api/db/ds-to-do', { method: 'POST', body: JSON.stringify({ query: 'INSERT INTO `tasks` (`id`, `name`, `status`, `image`, `created_at`) VALUES (?, ?, ?, ?, ?)', values: [ newTask.id, newTask.name, newTask.status, newTask.image, newTask.created_at ] }) }).then(()=>{ setTasks([ ...tasks, newTask ]); setTaskInput(''); setLoading(false); }); }); }; return /*#__PURE__*/ React.createElement(DsToDo2, { tasks: tasks, taskInput: taskInput, setTaskInput: setTaskInput, addTask: addTask, loading: loading, __source: { fileName: "", lineNumber: 71, columnNumber: 5 }, __self: this }); } function EtaShare({ eta, familyMembers }) { const [entries, setEntries] = React.useState([]); const [profilePics, setProfilePics] = React.useState({}); const names = [ "Dice", "Taro", "Emiko", "Kiki" ]; React.useEffect(()=>{ names.forEach((name)=>{ fetch(`/integrations/image-search/imagesearch?q=${name}`, { method: 'GET' }).then((response)=>response.json()).then((data)=>{ if (data.status === "success" && data.items.length > 0) { setProfilePics((prev)=>({ ...prev, [name]: data.items[0].thumbnailImageUrl })); } }); }); }, []); const handleSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const nameValue = formData.get("name"); const etaValue = formData.get("eta"); const memoValue = formData.get("memo"); const entry = { name: nameValue, eta: etaValue, memo: memoValue }; setEntries([ ...entries, entry ]); }; const entryList = entries.map((entry, index)=>{ const profilePic = profilePics[entry.name]; return /*#__PURE__*/ React.createElement("li", { key: index, className: "border p-2 rounded mb-2 flex items-center space-x-4", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, profilePic && /*#__PURE__*/ React.createElement("img", { src: profilePic, alt: `${entry.name} profile`, className: "w-12 h-12 rounded-full", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 37, columnNumber: 38 }, __self: this }, "Name:"), " ", entry.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 38, columnNumber: 38 }, __self: this }, "ETA:"), " ", entry.eta), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 39, columnNumber: 38 }, __self: this }, "Memo:"), " ", entry.memo))); }); return /*#__PURE__*/ React.createElement("div", { className: "m-4 p-6 bg-white rounded-lg shadow-lg w-full max-w-[600px]", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, "ETA Registration"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("select", { name: "name", className: "mt-1 block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, names.map((name, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: name, __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, name)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Your ETA"), /*#__PURE__*/ React.createElement("select", { name: "eta", className: "mt-1 block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, [ "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00" ].map((time, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: time, __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, time)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Memo"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "memo", className: "mt-1 block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-blue-500 text-white font-medium rounded-md", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "Share ETA")), /*#__PURE__*/ React.createElement("ul", { className: "mt-4", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, entryList)); } function EtaShareStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-8", __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(EtaShare, { eta: "2023-10-05T14:48", familyMembers: [ "Dice", "Taro", "Emiko", "Kiki" ], __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this })); } function MainComponent() { const [activeTab, setActiveTab] = React.useState('todo'); return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen flex flex-col items-center p-4 bg-gray-100 font-sans", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/edd7f5ea-a084-484a-8e67-fd5cf7c765a5/-/format/auto/", alt: "Header Key Visual", className: "w-full h-[150px] object-cover mb-4", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px]", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-around mb-4", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `p-2 rounded ${activeTab === 'todo' ? 'bg-blue-500 text-white' : 'bg-gray-300 text-gray-700'}`, onClick: ()=>setActiveTab('todo'), __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, "To-Do List"), /*#__PURE__*/ React.createElement("button", { className: `p-2 rounded ${activeTab === 'eta' ? 'bg-blue-500 text-white' : 'bg-gray-300 text-gray-700'}`, onClick: ()=>setActiveTab('eta'), __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "ETA Registration")), activeTab === 'todo' && /*#__PURE__*/ React.createElement(DsToDo2Story, { __source: { fileName: "", lineNumber: 22, columnNumber: 34 }, __self: this }), activeTab === 'eta' && /*#__PURE__*/ React.createElement(EtaShareStory, { __source: { fileName: "", lineNumber: 23, columnNumber: 33 }, __self: this }))); }