Merge branch 'main' of github.com:ArianHamdi/todo-topia

Author: ArianHamdi

src/components/EmptyState/EmptyState.module.scss

@@ -0,0 +1,20 @@
+.emptyState {
+    @include flex-center;
+    width: 100%;
+    margin-top: 30px;
+}
+
+.message {
+    @include flex-center;
+    flex-direction: column;
+    width: 220px;
+    background-color: $color-bg;
+    padding: 30px 0;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.icon {
+    fill: $color-footer-text;
+    margin-bottom: 20px;
+}

src/components/EmptyState/EmptyState.tsx

@@ -1,7 +1,14 @@
 import styles from './EmptyState.module.scss';
+import Icon from '@/assets/icons/bots.svg';
 
 const EmptyState = () => {
-  return <div>EmptyState</div>;
+  return (
+    <div className={styles.emptyState}>
+      <div className={styles.message}>
+        <Icon width={50} height={50} className={styles.icon} /> Empty!
+      </div>
+    </div>
+  );
 };
 
 export default EmptyState;

src/containers/Category/Category.tsx

@@ -11,6 +11,7 @@ import TodoList from '@/components/TodoList';
 import Header from '@/components/Header';
 import { useBackButton } from '@/hooks/useBackButton';
 import Spinner from '@/components/Spinner';
+import EmptyState from '@/components/EmptyState/EmptyState';
 
 const Category = () => {
   const {
@@ -73,9 +74,13 @@ const Category = () => {
         <LinkButton href={`/create/category/${categoryId}/todo-list`}>
           {t('new_todo_list')}
         </LinkButton>
-        {data?.todoLists?.map(todoList => (
-          <TodoList key={todoList.id} {...todoList} />
-        ))}
+        {data.todoLists.length === 0 ? (
+          <EmptyState />
+        ) : (
+          data?.todoLists?.map(todoList => (
+            <TodoList key={todoList.id} {...todoList} />
+          ))
+        )}
       </div>
     </div>
   );

src/containers/Landing/Landing.tsx

@@ -6,6 +6,7 @@ import LinkButton from '@/components/LinkButton';
 import Profile from '@/components/Profile';
 import { useBackButton } from '@/hooks/useBackButton';
 import Spinner from '@/components/Spinner';
+import EmptyState from '@/components/EmptyState/EmptyState';
 
 const Landing = () => {
   useBackButton();
@@ -25,7 +26,9 @@ const Landing = () => {
         <h1>{t('task_categories')}</h1>
       </div>
       <LinkButton href='/create/category'>{t('new_category')}</LinkButton>
-      <div className={styles.categories}>{items}</div>
+      <div className={styles.categories}>
+        {data?.length === 0 ? <EmptyState /> : items}
+      </div>
     </div>
   );
 };

src/containers/TodoList/TodoList.tsx

@@ -12,6 +12,7 @@ import { useDeleteTodoList, useTodoList } from '@/hooks/api/todo-list';
 import Header from '@/components/Header';
 import { useBackButton } from '@/hooks/useBackButton';
 import Spinner from '@/components/Spinner';
+import EmptyState from '@/components/EmptyState/EmptyState';
 
 const TodoList = () => {
   const {
@@ -73,9 +74,11 @@ const TodoList = () => {
         <LinkButton href={`/create/todo-list/${todoListId}/task`}>
           {t('new_task')}
         </LinkButton>
-        {data.tasks.map(task => (
-          <Task key={task.id} {...task} />
-        ))}
+        {data.tasks.length === 0 ? (
+          <EmptyState />
+        ) : (
+          data.tasks.map(task => <Task key={task.id} {...task} />)
+        )}
       </div>
     </div>
   );