function ToDoApp({ tasks, newTask, loading, handleChangeTask, handleSubmit, handleCompleteTask, handleDeleteTask }) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center py-10", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto mb-10", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "To-Do App"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-md bg-white rounded-lg p-6 shadow-md", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center border-b border-gray-200 py-2", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "newTask", className: "appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none font-roboto", type: "text", placeholder: "Add a new task", value: newTask, onChange: handleChangeTask, __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "flex-shrink-0 bg-blue-500 hover:bg-blue-700 text-sm text-white font-bold py-2 px-4 rounded", type: "submit", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "Add"))), loading && /*#__PURE__*/ React.createElement("div", { className: "text-blue-500 mt-4", __source: { fileName: "", lineNumber: 26, columnNumber: 19 }, __self: this }, "Generating Image..."), /*#__PURE__*/ React.createElement("ul", { className: "w-full max-w-md mt-6 space-y-4", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, tasks.map((task, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: `bg-white p-4 rounded shadow-md ${task.completed ? 'line-through text-gray-500' : 'text-gray-700'}`, __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: task.imageUrl, alt: `Generated for ${task.text}`, className: "w-full rounded-md", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, task.text), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 justify-end", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-green-500 hover:text-green-700", onClick: ()=>handleCompleteTask(index), __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check", __source: { fileName: "", lineNumber: 41, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-red-500 hover:text-red-700", onClick: ()=>handleDeleteTask(index), __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this })))))))); } function ToDoAppStory() { const [tasks, setTasks] = React.useState([]); const [newTask, setNewTask] = React.useState(''); const [loading, setLoading] = React.useState(false); const fetchTasks = async ()=>{ const response = await fetch('/api/db/to-do', { method: 'POST', body: JSON.stringify({ query: 'SELECT `name`, `status`, `image`, `createdAt` FROM `to_do`', values: [] }) }); const result = await response.json(); const fetchedTasks = result.data.map((task)=>({ text: task.name, completed: task.status === 'completed', imageUrl: task.image, createdAt: task.createdAt })); setTasks(fetchedTasks); }; React.useEffect(()=>{ fetchTasks(); }, []); const addTask = async ()=>{ if (newTask.trim()) { setLoading(true); const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(newTask)}`, { method: 'GET' }); const result = await response.json(); const imageUrl = result.data[0]; await fetch('/api/db/to-do', { method: 'POST', body: JSON.stringify({ query: 'INSERT INTO `to_do` (`name`, `status`, `image`, `createdAt`) VALUES (?, ?, ?, ?)', values: [ newTask, 'pending', imageUrl, new Date().toISOString() ] }) }); setTasks([ ...tasks, { text: newTask, completed: false, imageUrl, createdAt: new Date().toISOString() } ]); setNewTask(''); setLoading(false); } }; const completeTask = async (index)=>{ const newTasks = [ ...tasks ]; newTasks[index].completed = !newTasks[index].completed; await fetch('/api/db/to-do', { method: 'POST', body: JSON.stringify({ query: 'UPDATE `to_do` SET `status` = ? WHERE `name` = ?', values: [ newTasks[index].completed ? 'completed' : 'pending', newTasks[index].text ] }) }); setTasks(newTasks); }; const deleteTask = async (index)=>{ const taskToDelete = tasks[index]; await fetch('/api/db/to-do', { method: 'POST', body: JSON.stringify({ query: 'DELETE FROM `to_do` WHERE `name` = ?', values: [ taskToDelete.text ] }) }); const newTasks = tasks.filter((_, i)=>i !== index); setTasks(newTasks); }; return /*#__PURE__*/ React.createElement(ToDoApp, { tasks: tasks, newTask: newTask, loading: loading, handleChangeTask: (e)=>setNewTask(e.target.value), handleSubmit: (e)=>{ e.preventDefault(); addTask(); }, handleCompleteTask: completeTask, handleDeleteTask: deleteTask, __source: { fileName: "", lineNumber: 138, columnNumber: 5 }, __self: this }); } function EtaSharingApp({ onSubmit, etaList, images }) { const times = Array.from({ length: 7 }, (_, i)=>`${17 + i}:00`); const names = [ "Dice", "Taro", "Emiko", "Kiki" ]; const profileImages = { Dice: images?.Dice || '', Taro: images?.Taro || '', Emiko: images?.Emiko || '', Kiki: images?.Kiki || '' }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-8 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-6", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, "Register Your ETA"), /*#__PURE__*/ React.createElement("form", { onSubmit: onSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("select", { name: "name", className: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", required: true, __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, names.map((name)=>/*#__PURE__*/ React.createElement("option", { key: name, value: name, __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this }, name)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "ETA"), /*#__PURE__*/ React.createElement("select", { name: "eta", className: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", required: true, __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, times.map((time)=>/*#__PURE__*/ React.createElement("option", { key: time, value: time, __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, time)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Memo"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "memo", className: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", required: true, __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Share ETA")), etaList.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Shared ETAs"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, etaList.map((eta, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "p-4 rounded-lg bg-gray-100 shadow-sm", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 62, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: profileImages[eta.name], alt: `Profile of ${eta.name}`, className: "w-10 h-10 rounded-full mr-3", __source: { fileName: "", lineNumber: 63, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 64, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 65, columnNumber: 23 }, __self: this }, "Name: ", eta.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 66, columnNumber: 23 }, __self: this }, "ETA: ", eta.eta), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 67, columnNumber: 23 }, __self: this }, "Memo: ", eta.memo))))))))); } function EtaSharingAppStory() { const [etaList, setEtaList] = React.useState([]); const [images, setImages] = React.useState({}); React.useEffect(()=>{ async function fetchImages() { const names = [ "Dice", "Taro", "Emiko", "Kiki" ]; const fetchedImages = {}; for (const name of names){ const response = await fetch(`/integrations/image-search/imagesearch?q=${name}`); const data = await response.json(); if (data.status === 'success' && data.items.length > 0) { fetchedImages[name] = data.items[0].thumbnailImageUrl; } } setImages(fetchedImages); } fetchImages(); }, []); const handleSubmit = async (e)=>{ e.preventDefault(); const newETA = { name: e.target.name.value, eta: e.target.eta.value, memo: e.target.memo.value, profile_photo: images[e.target.name.value] }; setEtaList([ ...etaList, newETA ]); await fetch('/api/db/eta', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `eta` (name, time, message, profile_photo) VALUES (?, ?, ?, ?)", values: [ newETA.name, newETA.eta, newETA.memo, newETA.profile_photo ] }) }); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 122, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(EtaSharingApp, { onSubmit: handleSubmit, etaList: etaList, images: images, __source: { fileName: "", lineNumber: 123, columnNumber: 7 }, __self: this })); } function MainComponent() { const [activeTab, setActiveTab] = React.useState('todo'); const [tasks, setTasks] = React.useState([]); const [newTask, setNewTask] = React.useState(''); const [loading, setLoading] = React.useState(false); const [etaList, setEtaList] = React.useState([]); const [images, setImages] = React.useState({}); const fetchTasks = async ()=>{ const response = await fetch('/api/db/to-do', { method: 'POST', body: JSON.stringify({ query: 'SELECT `name`, `status`, `image`, `createdAt` FROM `to_do`', values: [] }) }); const result = await response.json(); const fetchedTasks = result.data.map((task)=>({ text: task.name, completed: task.status === 'completed', imageUrl: task.image, createdAt: task.createdAt })); setTasks(fetchedTasks); }; React.useEffect(()=>{ fetchTasks(); async function fetchImages() { const names = [ "Dice", "Taro", "Emiko", "Kiki" ]; const fetchedImages = {}; for (const name of names){ const response = await fetch(`/integrations/image-search/imagesearch?q=${name}`); const data = await response.json(); if (data.status === 'success' && data.items.length > 0) { fetchedImages[name] = data.items[0].thumbnailImageUrl; } } setImages(fetchedImages); } fetchImages(); }, []); const addTask = async ()=>{ if (newTask.trim()) { setLoading(true); const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(newTask)}`, { method: 'GET' }); const result = await response.json(); const imageUrl = result.data[0]; await fetch('/api/db/to-do', { method: 'POST', body: JSON.stringify({ query: 'INSERT INTO `to_do` (`name`, `status`, `image`, `createdAt`) VALUES (?, ?, ?, ?)', values: [ newTask, 'pending', imageUrl, new Date().toISOString() ] }) }); setLoading(false); setTasks([ ...tasks, { text: newTask, completed: false, imageUrl } ]); setNewTask(''); } }; const completeTask = async (index)=>{ const newTasks = [ ...tasks ]; newTasks[index].completed = !newTasks[index].completed; await fetch('/api/db/to-do', { method: 'POST', body: JSON.stringify({ query: 'UPDATE `to_do` SET `status` = ? WHERE `name` = ?', values: [ newTasks[index].completed ? 'completed' : 'pending', newTasks[index].text ] }) }); setTasks(newTasks); }; const deleteTask = async (index)=>{ const taskToDelete = tasks[index]; await fetch('/api/db/to-do', { method: 'POST', body: JSON.stringify({ query: 'DELETE FROM `to_do` WHERE `name` = ?', values: [ taskToDelete.text ] }) }); const newTasks = tasks.filter((_, i)=>i !== index); setTasks(newTasks); }; const handleSubmitEta = async (e)=>{ e.preventDefault(); const newETA = { name: e.target.name.value, eta: e.target.eta.value, memo: e.target.memo.value, profile_photo: images[e.target.name.value] }; setEtaList([ ...etaList, newETA ]); await fetch('/api/db/eta', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `eta` (name, time, message, profile_photo) VALUES (?, ?, ?, ?)", values: [ newETA.name, newETA.eta, newETA.memo, newETA.profile_photo ] }) }); }; const tabStyles = (isActive)=>isActive ? 'bg-blue-500 text-white' : 'bg-white text-blue-500'; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center", __source: { fileName: "", lineNumber: 85, 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-[100px]", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-around my-4", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `py-2 px-4 ${tabStyles(activeTab === 'todo')}`, onClick: ()=>setActiveTab('todo'), __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "To-Do App"), /*#__PURE__*/ React.createElement("button", { className: `py-2 px-4 ${tabStyles(activeTab === 'eta')}`, onClick: ()=>setActiveTab('eta'), __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "ETA Sharing App")), activeTab === 'todo' ? /*#__PURE__*/ React.createElement(ToDoApp, { tasks: tasks, newTask: newTask, loading: loading, handleChangeTask: (e)=>setNewTask(e.target.value), handleSubmit: (e)=>{ e.preventDefault(); addTask(); }, handleCompleteTask: completeTask, handleDeleteTask: deleteTask, __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }) : /*#__PURE__*/ React.createElement(EtaSharingApp, { onSubmit: handleSubmitEta, etaList: etaList, images: images, __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }))); }