Keep/keep-notes/components/note-checklist.tsx

43 lines
1.0 KiB
TypeScript

import { CheckItem } from "@/lib/types"
import { Checkbox } from "@/components/ui/checkbox"
import { cn } from "@/lib/utils"
interface NoteChecklistProps {
items: CheckItem[]
onToggleItem: (itemId: string) => void
}
export function NoteChecklist({ items, onToggleItem }: NoteChecklistProps) {
if (!items || items.length === 0) return null
return (
<div className="space-y-1">
{items.map((item) => (
<div
key={item.id}
className="flex items-start gap-2"
onClick={(e) => {
e.stopPropagation()
onToggleItem(item.id)
}}
>
<Checkbox
checked={item.checked}
className="mt-0.5"
/>
<span
className={cn(
'text-sm',
item.checked
? 'line-through text-gray-500 dark:text-gray-500'
: 'text-gray-700 dark:text-gray-300'
)}
>
{item.text}
</span>
</div>
))}
</div>
)
}