Link backend to profile page

src/components/Header/Header.jsx

@@ -70,7 +70,7 @@ function Header() {
                             {unreadNotification && <span className={styles.notificationBadge}></span>}
                         </button>
 
-                        <Link to="" className={styles.profileLink}>
+                        <Link to="/profile" className={styles.profileLink}>
                             <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="auto" fill="currentFill">
                                 <path d="M480-492.31q-57.75 0-98.87-41.12Q340-574.56 340-632.31q0-57.75 41.13-98.87 41.12-41.13 98.87-41.13 57.75 0 98.87 41.13Q620-690.06 620-632.31q0 57.75-41.13 98.88-41.12 41.12-98.87 41.12ZM180-187.69v-88.93q0-29.38 15.96-54.42 15.96-25.04 42.66-38.5 59.3-29.07 119.65-43.61 60.35-14.54 121.73-14.54t121.73 14.54q60.35 14.54 119.65 43.61 26.7 13.46 42.66 38.5Q780-306 780-276.62v88.93H180Z" />
                             </svg>

src/components/Task/Task.jsx

@@ -0,0 +1,30 @@
+import React, {useEffect, useState} from "react";
+import getEventById from "../../utils/event/getEventById.js";
+import styles from "./Task.module.css";
+import formatDate from "../../utils/date/formatDate.js";
+
+const Task = ({ task }) => {
+    const [event, setEvent] = useState(null);
+
+    useEffect(() => {
+        (async () => {
+            const e = await getEventById(task.id);
+            console.log(e);
+            setEvent(e);
+        }) ()
+    }, [])
+
+    return (
+        <div className={`${styles.task} glassCard`}>
+            <div className={styles.content}>
+                <div>
+                    <h2> {event && event.name} - {task.name}</h2>
+                    <p className={styles.desc}> {task.description} </p>
+                    <p className={styles.date}> {formatDate(task.start)} </p>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Task;

src/components/Task/Task.module.css

@@ -0,0 +1,22 @@
+.task {
+    width: 100%;
+    padding: 12px;
+    margin-bottom: 10px;
+    border-radius: 8px;
+}
+
+.content {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+}
+
+.desc {
+    font-size: 0.8rem;
+    color: #666;
+    margin: 0 0 0 0;
+}
+
+.date {
+    font-size: 0.8rem;
+}