diff --git a/frontend/src/app/components/Forms/Input.js b/frontend/src/app/components/Forms/Input.js
new file mode 100644
index 0000000..05bb29b
--- /dev/null
+++ b/frontend/src/app/components/Forms/Input.js
@@ -0,0 +1,7 @@
+export default function Input(props) {
+ return (
+ <>
+
+ >
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/Tasks/AddTask.js b/frontend/src/app/components/Tasks/AddTask.js
new file mode 100644
index 0000000..f67d733
--- /dev/null
+++ b/frontend/src/app/components/Tasks/AddTask.js
@@ -0,0 +1,78 @@
+import { useState } from "react";
+import Input from "../Forms/Input";
+
+export default function AddTask() {
+
+ const [taskName, setTaskName] = useState("");
+ const [importance, setImportance] = useState(0);
+ const [urgency, setUrgency] = useState(0);
+ const [repeat, setRepeat] = useState(0);
+
+ const importanceOptions = [
+ {
+ weight: 1,
+ name: "Nice to have"
+ },
+ {
+ weight: 2,
+ name: "Quite important"
+ },
+ {
+ weight: 3,
+ name: "F*cking important"
+ }
+ ];
+
+ const urgencyOptions = [
+ {
+ weight: 1,
+ name: "Maybe one day"
+ },
+ {
+ weight: 2,
+ name: "To be done ASAP"
+ },
+ {
+ weight: 3,
+ name: "Right now!"
+ }
+ ];
+
+ const repeatOptions = [
+ {
+ weight: 1,
+ name: "Daily"
+ },
+ {
+ weight: 2,
+ name: "Weekly"
+ },
+ {
+ weight: 3,
+ name: "Monthly"
+ }
+ ];
+
+ const addTask = async (e) => {
+ e.preventDefault();
+
+ };
+
+ return (
+ <>
+
Add Task
+
+ setTaskName(e.target.value)}
+ type="text"
+ value={taskName}
+ name="taskName"
+ style={{width: "100%"}}
+ />
+
+
+
+
+ >
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/app/page.js b/frontend/src/app/page.js
index 51416ee..bff725e 100644
--- a/frontend/src/app/page.js
+++ b/frontend/src/app/page.js
@@ -4,6 +4,9 @@ import { useState, useEffect } from "react";
import styles from "./page.module.css";
import TaskRow from "./components/TaskRow/TaskRow";
import defaultTasks from "./testdata/tasks.js";
+import Popover from "./components/Popover/Popover";
+import AddCircleRoundedIcon from '@mui/icons-material/AddCircleRounded';
+import AddTask from "./components/Tasks/AddTask";
export default function Home() {
const [tasks, setTasks] = useState(defaultTasks);
@@ -30,6 +33,17 @@ export default function Home() {
return (
<>
+
+
+
+ }
+ >
+
+
{tasks.map(({ name, id }) => {
return ;
})}
diff --git a/frontend/src/app/page.module.css b/frontend/src/app/page.module.css
index 44c9a9e..297ff82 100644
--- a/frontend/src/app/page.module.css
+++ b/frontend/src/app/page.module.css
@@ -115,6 +115,36 @@
position: relative;
}
+.addTaskIcon:before {
+ content: "";
+ position: absolute;
+ top: 25%;
+ left: 25%;
+ width: 50%;
+ height: 50%;
+ border-radius: 50%;
+ background: var(--color_white);
+}
+
+.addTaskIcon {
+ position: absolute;
+ color: var(--color_purple);
+ width: 4.5rem;
+ height: 4.5rem;
+ transform: translate(-50%, -50%);
+ border-radius: 50%;
+ cursor: pointer;
+ z-index: 1;
+}
+
+.icon__add {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ color: var(--color_purple);
+ z-index: 5;
+}
+
/* Enable hover only on non-touch devices */
@media (hover: hover) and (pointer: fine) {
.card:hover {