Moved components into corresponding folder

src/components/AddTask.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+
+import SwipeableDrawer from "@mui/material/SwipeableDrawer";
+import InputBase from "@mui/material/InputBase";
+import TrapFocus from "@mui/material/Unstable_TrapFocus";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+
+export const AddTask: React.FC = () => {
+  const [open, setOpen] = useState(true);
+
+  const onOpen = () => setOpen(true);
+  const onClose = () => setOpen(false);
+
+  return (
+    <TrapFocus open={open}>
+      <SwipeableDrawer
+        sx={{
+          "& .MuiDrawer-paperAnchorBottom": {
+            overflowY: "visible",
+            padding: (theme) => theme.spacing(0, 2, 2, 2),
+          },
+          position: "relative",
+        }}
+        anchor="bottom"
+        open={open}
+        onOpen={onOpen}
+        onClose={onClose}
+      >
+        <Box
+          sx={{
+            position: "absolute",
+            width: "100%",
+            height: (theme) => theme.spacing(2),
+            borderRadius: (theme) => theme.spacing(2, 2, 0, 0),
+            top: (theme) => "-" + theme.spacing(2),
+            left: 0,
+            background: (theme) => theme.palette.background.paper,
+          }}
+        />
+        <InputBase
+          fullWidth
+          placeholder="New task"
+          autoFocus={open}
+          multiline
+        />
+        <Box sx={{ paddingTop: (theme) => theme.spacing(1) }}>
+          <Button variant="text" sx={{ float: "right" }}>
+            Save
+          </Button>
+        </Box>
+      </SwipeableDrawer>
+    </TrapFocus>
+  );
+};

src/components/AppBar.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import Box from "@mui/material/Box";
+import Fab from "@mui/material/Fab";
+import Add from "@mui/icons-material/Add";
+
+export const AppBar: React.FC = () => (
+  <Box sx={{ width: "100%", justifyContent: "center", display: "flex" }}>
+    <Fab
+      variant="extended"
+      color="primary"
+      aria-label="add"
+      sx={{
+        position: "relative",
+        zIndex: 1,
+        top: -30,
+      }}
+    >
+      <Add sx={{ marginRight: 1 }} />
+      Add a new task
+    </Fab>
+  </Box>
+);

src/components/Layout.tsx

@@ -0,0 +1,46 @@
+import React, { ReactNode, useMemo } from "react";
+
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import Checkbox from "@mui/material/Checkbox";
+import CssBaseline from "@mui/material/CssBaseline";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+
+export type LayoutProps = {
+  appBar: ReactNode;
+  content: ReactNode;
+  title: string;
+};
+
+export const Layout: React.FC<LayoutProps> = ({ appBar, content, title }) => {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+
+  const theme = useMemo(
+    () =>
+      createTheme({ palette: { mode: prefersDarkMode ? "dark" : "light" } }),
+    [prefersDarkMode]
+  );
+
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Box sx={{ padding: (theme) => theme.spacing(2, 2, 10, 2) }}>
+        <Typography variant="h4" sx={{ paddingLeft: 2, marginBottom: 2 }}>
+          <Checkbox sx={{ visibility: "hidden" }} />
+          {title}
+        </Typography>
+        {content}
+      </Box>
+      <AppBar
+        position="fixed"
+        color="transparent"
+        sx={{ top: "auto", bottom: 0 }}
+      >
+        <Toolbar>{appBar}</Toolbar>
+      </AppBar>
+    </ThemeProvider>
+  );
+};

src/components/TodoItem.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+
+import Checkbox from "@mui/material/Checkbox";
+import IconButton from "@mui/material/IconButton";
+import ListItem from "@mui/material/ListItem";
+import ListItemSecondaryAction from "@mui/material/ListItemSecondaryAction";
+import ListItemText from "@mui/material/ListItemText";
+import TextField from "@mui/material/TextField";
+import DeleteOutlined from "@mui/icons-material/DeleteOutlined";
+
+import { TaskItemT } from "../types";
+
+export type TodoItemProps = { task: TaskItemT };
+
+export const TodoItem: React.FC<TodoItemProps> = ({ task }) => {
+  const { done, text } = task;
+
+  const [editing, setEditing] = useState(false);
+
+  return (
+    <ListItem>
+      <Checkbox checked={done} />
+      {editing ? (
+        <TextField
+          fullWidth
+          variant="standard"
+          value={text}
+          autoFocus={true}
+          onBlur={() => setEditing(false)}
+          multiline
+        />
+      ) : (
+        <ListItemText onClick={() => setEditing(true)} primary={text} />
+      )}
+      <ListItemSecondaryAction>
+        <IconButton aria-label="Delete Todo">
+          <DeleteOutlined />
+        </IconButton>
+      </ListItemSecondaryAction>
+    </ListItem>
+  );
+};

src/components/TodoList.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import List from "@mui/material/List";
+import Paper from "@mui/material/Paper";
+
+import { TodoItem } from "./TodoItem";
+import { TaskItemT } from "../types";
+
+export type TodoListProps = {
+  tasks: TaskItemT[];
+};
+
+export const TodoList: React.FC<TodoListProps> = ({ tasks }) => {
+  return (
+    <Paper variant="outlined">
+      <List>
+        {tasks.map((task) => (
+          <TodoItem key={task.id} task={task} />
+        ))}
+      </List>
+    </Paper>
+  );
+};