feat: add done counter

src/components/toolbox/todo/todos/todos.tsx

@@ -6,13 +6,16 @@ import styles from './todos.module.css';
 
 export function Todos() {
   const todos = useTodoStore(state => state.todos);
+  const doneCount = useTodoStore(state => state.doneCount());
 
   return (
     <div className={styles.todos}>
       <header>
         <p className={styles.label}>Your Todos</p>
         <div className={styles.divider} />
-        <p className={styles.counter}>0 / 0</p>
+        <p className={styles.counter}>
+          {doneCount} / {todos.length}
+        </p>
       </header>
 
       {todos.length > 0 ? (

src/stores/todo.ts

@@ -6,6 +6,7 @@ import { v4 as uuid } from 'uuid';
 interface TodoStore {
   addTodo: (todo: string) => void;
   deleteTodo: (id: string) => void;
+  doneCount: () => number;
   editTodo: (id: string, newTodo: string) => void;
   todos: Array<{
     createdAt: number;
@@ -32,13 +33,18 @@ export const useTodoStore = create<TodoStore>()(
           ],
         });
       },
-
       deleteTodo(id) {
         set({
           todos: get().todos.filter(todo => todo.id !== id),
         });
       },
 
+      doneCount() {
+        const { todos } = get();
+
+        return todos.filter(todo => todo.done).length;
+      },
+
       editTodo(id, newTodo) {
         set({
           todos: get().todos.map(todo => {