diff --git a/src/components/EmptyList.tsx b/src/components/EmptyList.tsx
new file mode 100644
index 0000000..f93c8b5
--- /dev/null
+++ b/src/components/EmptyList.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import InboxIcon from "@mui/icons-material/Inbox";
+
+export const EmptyList: React.FC = () => (
+ theme.spacing(1),
+ paddingBottom: (theme) => theme.spacing(3),
+ textAlign: "center",
+ }}
+ >
+
+ Empty in tasks
+ Write first task to save it here
+ To insert new line in task, press Shift+Enter
+
+);
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index f91a965..bc1f919 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -29,7 +29,7 @@ export const Layout: React.FC = ({ appBar, content, title }) => {
theme.spacing(2, 2, 10, 2) }}>
-
+
{title}
{content}
diff --git a/src/components/TodoList.tsx b/src/components/TodoList.tsx
index a04b964..d198178 100644
--- a/src/components/TodoList.tsx
+++ b/src/components/TodoList.tsx
@@ -5,17 +5,22 @@ import Paper from "@mui/material/Paper";
import { TodoItem } from "./TodoItem";
import { useAppSelector } from "../hooks";
+import { EmptyList } from "./EmptyList";
export const TodoList: React.FC = () => {
const tasks = useAppSelector((state) => state.todo.tasks);
return (
-
- {tasks.map((task, index) => (
-
- ))}
-
+ {tasks.length ? (
+
+ {tasks.map((task, index) => (
+
+ ))}
+
+ ) : (
+
+ )}
);
};