Remove task view in EventItem

src/pages/Home/components/EventList/EventItem.tsx

@@ -1,6 +1,6 @@
 import styles from "./EventList.module.css";
 import { formatDateLetter } from "../../../../utils/date/formatDateLetter";
-import { useState } from "react";
+import { useNavigate } from "react-router";
 
 type Task = {
   name: string;
@@ -10,6 +10,7 @@ type Task = {
 };
 
 type EventGroup = {
+  id: number;
   date: string;
   name: string;
   start: string | Date;
@@ -21,60 +22,19 @@ type EventItemProps = {
 };
 
 export default function EventItem({ eventGroup }: EventItemProps) {
-  const [isVisible, setIsVisible] = useState<boolean>(false);
+
+  const navigate = useNavigate();
 
   return (
     <div
       key={eventGroup.date}
       className={`${styles.eventGroup} glassBorder`}
-      onClick={() => setIsVisible(!isVisible)}
+      onClick={() => navigate(`/events/${eventGroup.id}`)}
     >
       <div className={styles.eventTitle}>
         <p className={styles.title}>{eventGroup.name}</p>
         <p>{formatDateLetter(eventGroup.start)}</p>
       </div>
-
-      {isVisible && (
-        <ul className={styles.eventDetails}>
-          {eventGroup.tasks.map((task, i) => (
-            <li key={i} className={styles.eventTasks}>
-              <p>
-                - {task.name} - {task.description}
-              </p>
-              <p>
-                {formatDateLetter(task.start)} - {formatDateLetter(task.end)}
-              </p>
-            </li>
-          ))}
-        </ul>
-      )}
     </div>
   );
 }
-
-/*import styles from "./eventList.module.css";
-import { formatDateLetter } from "../../../../utils/date/formatDateLetter.ts";
-import { useState } from "react";
-
-export default function EventItem({ eventGroup }) {
-
-    const [isVisible, setIsVisible] = useState(false);
-
-    return <div key={eventGroup.date} className={`${styles.eventGroup} glassBorder`} onClick={() => setIsVisible(!isVisible)}>
-        <div className={styles.eventTitle}>
-            <p className={styles.title}>{eventGroup.name}</p>
-            <p>{formatDateLetter(eventGroup.start)}</p>
-        </div>
-        {isVisible &&
-            <ul className={styles.eventDetails}>
-                {eventGroup.tasks.map((task, i) => (
-                    <li key={i} className={styles.eventTasks}>
-                        <p>- {task.name} - {task.description}</p>
-                        <p>{formatDateLetter(task.start)} - {formatDateLetter(task.end)}</p>
-                    </li>
-                ))}
-            </ul>
-        }
-    </div>
-}
-*/