Paul Bailey
282a0295ec
- Created ItemForm component with fields for all metadata (priority, due date, tags, notes) - Created ItemDetail component to display all item information - Built /list/[id]/item/[itemId] page for viewing full item details - Built /list/[id]/item/[itemId]/edit page for editing items - Added form validation for item inputs (title required, length limits) - Created DeleteItemButton and ToggleItemButton helper components - Enhanced createItem action to support full metadata on creation - Added getItem action to fetch individual items with list data Requirements: 1.1, 1.2, 5.1, 5.2, 5.3, 5.4
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { toggleItem } from '@/lib/actions'
|
|
import { CheckCircle2, Circle } from 'lucide-react'
|
|
|
|
interface ToggleItemButtonProps {
|
|
itemId: string
|
|
completed: boolean
|
|
}
|
|
|
|
export default function ToggleItemButton({ itemId, completed }: ToggleItemButtonProps) {
|
|
const [isToggling, setIsToggling] = useState(false)
|
|
|
|
const handleToggle = async () => {
|
|
setIsToggling(true)
|
|
try {
|
|
await toggleItem(itemId)
|
|
} catch (error) {
|
|
console.error('Error toggling item:', error)
|
|
} finally {
|
|
setIsToggling(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<button
|
|
onClick={handleToggle}
|
|
disabled={isToggling}
|
|
className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-50 text-gray-700 rounded-lg transition-colors"
|
|
>
|
|
{completed ? (
|
|
<>
|
|
<CheckCircle2 size={18} className="text-green-500" />
|
|
<span>Mark Incomplete</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Circle size={18} />
|
|
<span>Mark Complete</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
)
|
|
}
|