Refactor search bar

client-next/src/components/SearchBar/LocationInputField.tsx

@@ -0,0 +1,24 @@
+import { Form } from 'react-bootstrap';
+import { COORDINATE_PRECISION } from './constants.ts';
+import { Location } from '../../gql/graphql.ts';
+
+export function LocationInputField({ location, id, label }: { location?: Location; id: string; label: string }) {
+  return (
+    <Form.Group>
+      <Form.Label htmlFor={id}>{label}</Form.Label>
+      <Form.Control
+        type="text"
+        id={id}
+        size="sm"
+        placeholder="[Click in map]"
+        value={
+          location
+            ? `${location.coordinates?.latitude.toPrecision(
+                COORDINATE_PRECISION,
+              )} ${location.coordinates?.longitude.toPrecision(COORDINATE_PRECISION)}`
+            : undefined
+        }
+      />
+    </Form.Group>
+  );
+}

client-next/src/components/SearchBar/SearchBar.tsx

@@ -0,0 +1,28 @@
+import { Button, Stack } from 'react-bootstrap';
+import { TripQueryVariables } from '../../gql/graphql.ts';
+import { LocationInputField } from './LocationInputField.tsx';
+
+export function SearchBar({
+  onRoute,
+  tripQueryVariables,
+}: {
+  onRoute: () => void;
+  tripQueryVariables?: TripQueryVariables;
+}) {
+  return (
+    <section
+      style={{
+        height: '5rem',
+        paddingLeft: '1rem',
+      }}
+    >
+      <Stack direction="horizontal" gap={2}>
+        <LocationInputField location={tripQueryVariables?.from} label="From" id="fromInputField" />
+        <LocationInputField location={tripQueryVariables?.to} label="To" id="toInputField" />
+        <Button variant="primary" onClick={onRoute}>
+          Route
+        </Button>
+      </Stack>
+    </section>
+  );
+}

client-next/src/components/SearchBar/constants.ts

@@ -0,0 +1 @@
+export const COORDINATE_PRECISION = 7;

client-next/src/screens/App.tsx

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