Add container components

client-next/src/components/DetailsViewContainer.tsx

@@ -0,0 +1,10 @@
+
+export function DetailsViewContainer() {
+  return (
+    <section style={{
+      height: '4rem'
+    }}>
+      DetailViewContainer
+    </section>
+  );
+}

client-next/src/components/ItineraryListContainer.tsx

@@ -0,0 +1,11 @@
+
+export function ItineraryListContainer() {
+  return (
+    <section style={{
+      width: '12rem',
+      height: "auto"
+    }}>
+      ItineraryListContainer
+    </section>
+  );
+}

client-next/src/components/MapView.tsx

@@ -30,12 +30,10 @@ const initialViewState = {
 export function MapView() {
   return (
     <Map
-      // @ts-ignore // TODO: why TypeScript complaining about this
       mapLib={import('maplibre-gl')}
-      // @ts-ignore // TODO: why TypeScript complaining about this
       mapStyle={mapStyle}
       initialViewState={initialViewState}
-      style={{ width: '100%', height: ' calc(100vh - 56px)' }}
+      style={{ width: '100%', height: 'calc(100vh - 184px)' }}
     >
       <NavigationControl position="top-left" />
     </Map>

client-next/src/components/SearchBarContainer.tsx

@@ -1,12 +1,10 @@
-import { useTripQuery } from '../hooks/useTripQuery.ts';
 
 export function SearchBarContainer() {
-  const [data, callback] = useTripQuery();
-
-  return (
-    <>
-      <button onClick={() => callback()}>Make request</button>
-      {data && <pre>{JSON.stringify(data.trip.tripPatterns, null, 2)}</pre>}
-    </>
-  );
+    return (
+        <section style={{
+            height: '4rem'
+        }}>
+            SearchBarContainer
+        </section>
+    );
 }

client-next/src/screens/App.tsx

@@ -1,13 +1,20 @@
+import {Stack} from "react-bootstrap";
 import { MapView } from '../components/MapView.tsx';
 import { NavBarContainer } from '../components/NavBarContainer.tsx';
 import { SearchBarContainer } from '../components/SearchBarContainer.tsx';
+import {ItineraryListContainer} from "../components/ItineraryListContainer.tsx";
+import {DetailsViewContainer} from "../components/DetailsViewContainer.tsx";
 
 export function App() {
   return (
     <div className="app">
       <NavBarContainer />
       <SearchBarContainer />
-      <MapView />
+      <Stack direction="horizontal" gap={0}>
+        <ItineraryListContainer />
+        <MapView />
+      </Stack>
+      <DetailsViewContainer />
     </div>
   );
 }