feat: add header to todos

src/components/toolbox/todo/form/form.tsx

@@ -22,6 +22,7 @@ export function Form() {
     <form onSubmit={handleSubmit}>
       <div className={styles.wrapper}>
         <input
+          placeholder="I have to ..."
           type="text"
           value={value}
           onChange={e => setValue(e.target.value)}

src/components/toolbox/todo/todo.module.css

@@ -1 +1,14 @@
-/* WIP */
+.header {
+  margin-bottom: 16px;
+
+  & .title {
+    margin-bottom: 8px;
+    font-family: var(--font-heading);
+    font-size: var(--font-md);
+    font-weight: 600;
+  }
+
+  & .desc {
+    color: var(--color-foreground-subtle);
+  }
+}

src/components/toolbox/todo/todo.tsx

@@ -12,7 +12,11 @@ interface TodoProps {
 export function Todo({ onClose, show }: TodoProps) {
   return (
     <Modal show={show} onClose={onClose}>
-      <h2 className={styles.title}>Todos</h2>
+      <header className={styles.header}>
+        <h2 className={styles.title}>Todo Checklist</h2>
+        <p className={styles.desc}>Super simple todo list.</p>
+      </header>
+
       <Form />
       <Todos />
     </Modal>

src/components/toolbox/todo/todos/todos.module.css

@@ -1 +1,31 @@
-/* WIP */
+.todos {
+  margin-top: 28px;
+
+  & header {
+    display: flex;
+    column-gap: 8px;
+    align-items: center;
+
+    & .label {
+      font-size: var(--font-sm);
+      font-weight: 500;
+    }
+
+    & .divider {
+      flex-grow: 1;
+      height: 1px;
+      background-color: var(--color-neutral-200);
+    }
+
+    & .counter {
+      font-size: var(--font-sm);
+      color: var(--color-foreground-subtle);
+    }
+  }
+
+  & .empty {
+    margin-top: 16px;
+    font-size: var(--font-sm);
+    color: var(--color-foreground-subtle);
+  }
+}

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

@@ -9,9 +9,26 @@ export function Todos() {
 
   return (
     <div className={styles.todos}>
-      {todos.map(todo => (
+      <header>
-        <Todo done={todo.done} id={todo.id} key={todo.id} todo={todo.todo} />
+        <p className={styles.label}>Your Todos</p>
-      ))}
+        <div className={styles.divider} />
+        <p className={styles.counter}>0 / 0</p>
+      </header>
+
+      {todos.length > 0 ? (
+        <>
+          {todos.map(todo => (
+            <Todo
+              done={todo.done}
+              id={todo.id}
+              key={todo.id}
+              todo={todo.todo}
+            />
+          ))}
+        </>
+      ) : (
+        <p className={styles.empty}>You don&apos;t have any todos.</p>
+      )}
     </div>
   );
 }