From c6cc61a17fcb8542ece3caccc0de536d8003b106 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Sun, 1 Sep 2024 12:57:59 +0430
Subject: [PATCH] feat: add header to todos

---
 src/components/toolbox/todo/form/form.tsx     |  1 +
 src/components/toolbox/todo/todo.module.css   | 15 ++++++++-
 src/components/toolbox/todo/todo.tsx          |  6 +++-
 .../toolbox/todo/todos/todos.module.css       | 32 ++++++++++++++++++-
 src/components/toolbox/todo/todos/todos.tsx   | 23 +++++++++++--
 5 files changed, 71 insertions(+), 6 deletions(-)

diff --git a/src/components/toolbox/todo/form/form.tsx b/src/components/toolbox/todo/form/form.tsx
index 853f04c..0b5c5d1 100644
--- a/src/components/toolbox/todo/form/form.tsx
+++ b/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)}
diff --git a/src/components/toolbox/todo/todo.module.css b/src/components/toolbox/todo/todo.module.css
index fdbd99d..d0b51dc 100644
--- a/src/components/toolbox/todo/todo.module.css
+++ b/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);
+  }
+}
diff --git a/src/components/toolbox/todo/todo.tsx b/src/components/toolbox/todo/todo.tsx
index 05663cd..5c74fb0 100644
--- a/src/components/toolbox/todo/todo.tsx
+++ b/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>
diff --git a/src/components/toolbox/todo/todos/todos.module.css b/src/components/toolbox/todo/todos/todos.module.css
index fdbd99d..e54cf06 100644
--- a/src/components/toolbox/todo/todos/todos.module.css
+++ b/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);
+  }
+}
diff --git a/src/components/toolbox/todo/todos/todos.tsx b/src/components/toolbox/todo/todos/todos.tsx
index 0b81812..eec1ae6 100644
--- a/src/components/toolbox/todo/todos/todos.tsx
+++ b/src/components/toolbox/todo/todos/todos.tsx
@@ -9,9 +9,26 @@ export function Todos() {
 
   return (
     <div className={styles.todos}>
-      {todos.map(todo => (
-        <Todo done={todo.done} id={todo.id} key={todo.id} todo={todo.todo} />
-      ))}
+      <header>
+        <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>
   );
 }