Added empty task list placeholder

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 = () => (
+  <Box
+    sx={{
+      padding: (theme) => theme.spacing(1),
+      paddingBottom: (theme) => theme.spacing(3),
+      textAlign: "center",
+    }}
+  >
+    <InboxIcon sx={{ fontSize: "10rem" }} color={"primary"} />
+    <Typography variant={"h6"}>Empty in tasks</Typography>
+    <Typography>Write first task to save it here</Typography>
+    <Typography>To insert new line in task, press Shift+Enter</Typography>
+  </Box>
+);

src/components/Layout.tsx

@@ -29,7 +29,7 @@ export const Layout: React.FC<LayoutProps> = ({ appBar, content, title }) => {
       <CssBaseline />
       <Box sx={{ padding: (theme) => theme.spacing(2, 2, 10, 2) }}>
         <Typography variant="h4" sx={{ paddingLeft: 2, marginBottom: 2 }}>
-          <Checkbox sx={{ visibility: "hidden" }} />
+          <Checkbox aria-hidden={true} sx={{ visibility: "hidden" }} />
           {title}
         </Typography>
         {content}

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 (
     <Paper variant="outlined">
-      <List>
-        {tasks.map((task, index) => (
-          <TodoItem key={task.id} task={task} index={index} />
-        ))}
-      </List>
+      {tasks.length ? (
+        <List>
+          {tasks.map((task, index) => (
+            <TodoItem key={task.id} task={task} index={index} />
+          ))}
+        </List>
+      ) : (
+        <EmptyList />
+      )}
     </Paper>
   );
 };