67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import { useState } from 'react';
|
|
import { ChevronRight, ChevronDown, Check } from 'lucide-react';
|
|
import type { Task } from '@/types';
|
|
import { cn } from '@/lib/utils';
|
|
import { useTasksStore } from '@/stores/tasks';
|
|
|
|
interface CompletedSectionProps {
|
|
tasks: Task[];
|
|
}
|
|
|
|
export function CompletedSection({ tasks }: CompletedSectionProps) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const { toggleComplete, setSelectedTask } = useTasksStore();
|
|
|
|
if (tasks.length === 0) return null;
|
|
|
|
return (
|
|
<div className="mt-6 border-t border-gray-100 pt-4">
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="flex items-center gap-2 text-sm font-medium text-gray-500 hover:text-gray-700 transition-colors"
|
|
>
|
|
{isOpen ? (
|
|
<ChevronDown className="w-4 h-4" />
|
|
) : (
|
|
<ChevronRight className="w-4 h-4" />
|
|
)}
|
|
Completed ({tasks.length})
|
|
</button>
|
|
|
|
{isOpen && (
|
|
<div className="mt-2 space-y-1">
|
|
{tasks.map((task) => (
|
|
<div
|
|
key={task.id}
|
|
className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-50 cursor-pointer group opacity-60"
|
|
onClick={() => setSelectedTask(task)}
|
|
>
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
toggleComplete(task.id);
|
|
}}
|
|
className="flex-shrink-0 w-5 h-5 rounded-full bg-gray-400 border-2 border-gray-400 flex items-center justify-center"
|
|
>
|
|
<Check className="w-3 h-3 text-white" />
|
|
</button>
|
|
<span className="text-sm text-gray-500 line-through">
|
|
{task.title}
|
|
</span>
|
|
{task.project && (
|
|
<span className="ml-auto flex items-center gap-1.5 text-xs text-gray-400">
|
|
<span
|
|
className="w-2 h-2 rounded"
|
|
style={{ backgroundColor: task.project.color }}
|
|
/>
|
|
{task.project.name}
|
|
</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|