src/components/Checklist.tsx - main - DME/NotesApp

src/components/Checklist.tsx
85 строк3 KB
Karasique333
Commit
19 июн 2025, 15:09
19 июн 2025, 15:09d96c829
'use client'

import { useState } from 'react'
import { Input } from './ui/input'
import { Button } from './ui/button'

type ChecklistItem = {
    content: string
    completed: boolean
}

export default function Checklist({
                                      checklist = [],
                                      setChecklist,
                                  }: {
    checklist?: ChecklistItem[] // делаем опциональным
    setChecklist: React.Dispatch<React.SetStateAction<ChecklistItem[]>>
}) {
    const [newItem, setNewItem] = useState('')

    const addItem = () => {
        if (newItem.trim() === '') return
        setChecklist([
            ...checklist,
            { content: newItem.trim(), completed: false },
        ])
        setNewItem('')
    }

    const toggleItem = (index: number) => {
        setChecklist(
            checklist.map((item, i) =>
                i === index ? { ...item, completed: !item.completed } : item
            )
        )
    }

    const removeItem = (index: number) => {
        setChecklist(checklist.filter((_, i) => i !== index))
    }

    return (
        <div className="mt-4">
            <h4 className="font-semibold mb-2">Чек-лист</h4>
            <div className="flex gap-2 mb-4">
                <Input
                    value={newItem}
                    onChange={(e) => setNewItem(e.target.value)}
                    placeholder="Новый пункт"
                />
                <Button onClick={addItem}>Добавить</Button>
            </div>
            <ul className="space-y-2">
                {checklist.map((item, index) => (
                    <li
                        key={index}
                        className="flex items-center justify-between bg-neutral-100 dark:bg-neutral-800 p-2 rounded"
                    >
                        <label className="flex items-center gap-2">
                            <input
                                type="checkbox"
                                checked={item.completed}
                                onChange={() => toggleItem(index)}
                            />
                            <span
                                className={`${
                                    item.completed ? 'line-through text-gray-400' : ''
                                }`}
                            >
                {item.content}
              </span>
                        </label>
                        <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => removeItem(index)}
                        >
                            ✕
                        </Button>
                    </li>
                ))}
            </ul>
        </div>
    )
}