add temp and humidity from tent, split departures depending on direction

src/components/Timetable/Timetable.tsx

@@ -1,18 +1,6 @@
 import { useEffect } from "react";
-
-import TimetableRow from "@/components/TimetableRow/TimetableRow";
+import DepartureList from "@/components/DepartureList/DepartureList";
 import { useKVVStore } from "@/store/kvv";
-import type { DepartureType } from "@/types/departureType";
-
-function parseTimetableData(data: DepartureType[]) {
-    const result = data.map((item) => {
-        return {
-            ...item,
-        };
-    });
-
-    return result;
-}
 
 export default function Timetable() {
     const fetchTimetable = useKVVStore((state) => state.fetch);
@@ -27,30 +15,11 @@ export default function Timetable() {
         return () => clearInterval(interval);
     }, [fetchTimetable]);
 
-    const hStreetData = parseTimetableData(hStreet.departureList || []);
-    const pStreetData = parseTimetableData(pStreet.departureList || []);
-
     return (
         <div>
             <h1>Timetable</h1>
-            <h2>H-Street Departures</h2>
-            <table>
-                <tbody>
-                    {hStreetData.map((departure, index) => (
-                        // biome-ignore lint/suspicious/noArrayIndexKey: there is no id
-                        <TimetableRow key={index} departure={departure} />
-                    ))}
-                </tbody>
-            </table>
-            <h2>P-Street Departures</h2>
-            <table>
-                <tbody>
-                    {pStreetData.map((departure, index) => (
-                        // biome-ignore lint/suspicious/noArrayIndexKey: there is no id
-                        <TimetableRow key={index} departure={departure} />
-                    ))}
-                </tbody>
-            </table>
+            <DepartureList departures={pStreet.departureList} name="P-Street" />
+            <DepartureList departures={hStreet.departureList} name="H-Street" />
         </div>
     );
 }