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) => ( + + ))} + + ) : ( + + )} ); };