function DraggableCategoriesList({ categories, newCategory, handleDragOver, handleDrop, handleDeleteCategory, handleAddCategory, setNewCategory }) { return /*#__PURE__*/ React.createElement("div", { className: "w-1/4 p-4 bg-[#222] text-white font-['M_PLUS_Rounded_1c']", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, "ジャンル"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, categories.map((category)=>/*#__PURE__*/ React.createElement("li", { key: category, className: "mb-2 flex items-center cursor-move", draggable: "true", onDragOver: handleDragOver, onDrop: (e)=>handleDrop(e, category), __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, category, /*#__PURE__*/ React.createElement("button", { className: "ml-2 text-red-500 hover:text-red-700", onClick: ()=>handleDeleteCategory(category), __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: newCategory, onChange: (e)=>setNewCategory(e.target.value), className: "mr-2 px-2 py-1 text-black", placeholder: "新しいジャンル", name: "newCategory", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "px-2 py-1 bg-blue-500 text-white rounded hover:bg-blue-600", onClick: handleAddCategory, __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "追加"))); } function DraggableCategoriesListStory() { const [categories, setCategories] = React.useState([ "Music", "Books", "Movies" ]); const [newCategory, setNewCategory] = React.useState(""); const handleDragOver = (e)=>e.preventDefault(); const handleDrop = (e, category)=>{ const categoryDetails = e.dataTransfer.getData("text"); // Handle cross-category drop logic }; const handleDeleteCategory = (category)=>{ setCategories(categories.filter((c)=>c !== category)); }; const handleAddCategory = ()=>{ if (newCategory.trim()) { setCategories([ ...categories, newCategory ]); setNewCategory(""); } }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 75, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DraggableCategoriesList, { categories: categories, newCategory: newCategory, handleDragOver: handleDragOver, handleDrop: handleDrop, handleDeleteCategory: handleDeleteCategory, handleAddCategory: handleAddCategory, setNewCategory: setNewCategory, __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this })); } function MainComponent() { const [tasks, setTasks] = React.useState([ { id: 1, title: 'Task 1', description: 'Description of Task 1', category: 'Category 1' }, { id: 2, title: 'Task 2', description: 'Description of Task 2', category: 'Category 2' }, { id: 3, title: 'Task 3', description: 'Description of Task 3', category: 'Category 1' }, { id: 4, title: 'Task 4', description: 'Description of Task 4', category: 'Category 3' }, { id: 5, title: 'Task 5', description: 'Description of Task 5', category: 'Category 2' }, { id: 6, title: 'Task 6', description: 'Description of Task 6', category: 'Category 1' }, { id: 7, title: 'Task 7', description: 'Description of Task 7', category: 'Category 3' }, { id: 8, title: 'Task 8', description: 'Description of Task 8', category: 'Category 2' } ]); const [categories, setCategories] = React.useState([ ...new Set(tasks.map((task)=>task.category)) ]); const [newCategory, setNewCategory] = React.useState(''); const handleDragStart = (e, id)=>{ e.dataTransfer.setData('text/plain', id); }; const handleDragOver = (e)=>{ e.preventDefault(); }; const handleDrop = (e, targetCategory)=>{ const sourceId = e.dataTransfer.getData('text'); const updatedTasks = tasks.map((task)=>{ if (task.id === parseInt(sourceId)) { return { ...task, category: targetCategory }; } return task; }); setTasks(updatedTasks); }; const handleEdit = (id, newTitle, newDescription)=>{ const updatedTasks = tasks.map((task)=>{ if (task.id === id) { return { ...task, title: newTitle, description: newDescription }; } return task; }); setTasks(updatedTasks); }; const handleCopy = (description)=>{ navigator.clipboard.writeText(description); }; const handleAddCategory = ()=>{ if (newCategory.trim() !== '') { setCategories([ ...categories, newCategory.trim() ]); setNewCategory(''); } }; const handleDeleteCategory = (category)=>{ setCategories(categories.filter((c)=>c !== category)); setTasks(tasks.filter((task)=>task.category !== category)); }; const handleAddCard = ()=>{ const newCard = { id: tasks.length + 1, title: 'New Task', description: 'Description of New Task', category: categories[0] }; setTasks([ ...tasks, newCard ]); }; const handleCardDrop = (e, targetIndex)=>{ e.preventDefault(); const sourceId = e.dataTransfer.getData('text'); const sourceIndex = tasks.findIndex((task)=>task.id === parseInt(sourceId)); const updatedTasks = [ ...tasks ]; const [removed] = updatedTasks.splice(sourceIndex, 1); updatedTasks.splice(targetIndex, 0, removed); setTasks(updatedTasks); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col font-[M_PLUS_Rounded_1c]", __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-4 bg-[#121212] text-white", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, "POLYTEC-COMMUNITY"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold mr-4", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "COM"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600", onClick: handleAddCard, __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "カード追加"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-grow", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(DraggableCategoriesList, { categories: categories, newCategory: newCategory, handleDragOver: handleDragOver, handleDrop: handleDrop, handleDeleteCategory: handleDeleteCategory, handleAddCategory: handleAddCategory, setNewCategory: setNewCategory, __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-3/4 p-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, tasks.map((task, index)=>/*#__PURE__*/ React.createElement("div", { key: task.id, className: "bg-[#010101] text-white p-6 rounded-lg shadow-md cursor-move relative", draggable: "true", onDragStart: (e)=>handleDragStart(e, task.id), onDragOver: (e)=>e.preventDefault(), onDrop: (e)=>handleCardDrop(e, index), __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 left-2 text-gray-400 text-sm", __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }, task.category), /*#__PURE__*/ React.createElement("input", { type: "text", value: task.title, onChange: (e)=>handleEdit(task.id, e.target.value, task.description), className: "text-xl font-semibold mb-2 w-full bg-transparent", name: "taskTitle", __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { value: task.description, onChange: (e)=>handleEdit(task.id, task.title, e.target.value), className: "text-gray-300 w-full bg-transparent", name: "taskDescription", __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "absolute top-2 right-2 text-gray-400 hover:text-gray-200", onClick: ()=>handleCopy(task.description), __source: { fileName: "", lineNumber: 132, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy", __source: { fileName: "", lineNumber: 136, columnNumber: 17 }, __self: this })))))), /*#__PURE__*/ React.createElement("footer", { className: "p-4 bg-[#121212] text-white text-center", __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }, "POLYTEC-COMMUNITY"))); }