🎨 Replace for loop with a <For/> control flow for PassagesPanel component

frontend/src/passagesPanel.tsx

@@ -1,4 +1,4 @@
-import { VoidComponent, createEffect, createResource, createSignal, ParentComponent, ParentProps, Show, useContext } from 'solid-js';
+import { VoidComponent, createEffect, createResource, createSignal, ParentComponent, ParentProps, Show, useContext, For } from 'solid-js';
 import { createDateNow, getTime } from '@solid-primitives/date';
 import { AnimationOptions } from '@motionone/types';
 import { Motion } from "@motionone/solid";
@@ -123,18 +123,17 @@ export const PassagesPanel: PassagesPanelComponent = (props) => {
 	return (
 		<div classList={{ [styles.passagesContainer]: true, [styles.displayed]: props.show }} >
 			<Show when={lines() !== undefined} >
-				{() => {
-					const ret = [];
-					for (const line of lines()) {
-						const byLinePassages = props.passages[line.id];
-						if (byLinePassages !== undefined) {
-							for (const destination of Object.keys(byLinePassages)) {
-								ret.push(<DestinationPassages passages={byLinePassages[destination]} line={line} destination={destination} />);
+				<For each={lines()}>
+					{(line) =>
+						<Show when={props.passages[line.id]}>
+							<For each={Object.keys(props.passages[line.id])}>
+								{(destination) =>
+									<DestinationPassages passages={props.passages[line.id][destination]} line={line} destination={destination} />
 								}
+							</For>
+						</Show>
 					}
-					}
-					return ret;
-				}}
+				</For>
 			</Show>
 		</div >
 	);