improves usage of mantine components in the tour guide demo

vintasoftware · Aug 27, 2024 · e67f0aa · e67f0aa
1 parent a080ec2
commit e67f0aa
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 32 deletions.
diff --git a/example/assets/js/components/TourGuide/TourGuide.module.css b/example/assets/js/components/TourGuide/TourGuide.module.css
diff --git a/example/assets/js/components/TourGuide/TourGuide.tsx b/example/assets/js/components/TourGuide/TourGuide.tsx
@@ -1,7 +1,12 @@
 import "@mantine/core/styles.css";
-import { Container, TextInput, Button } from "@mantine/core";
+import {
+  Container,
+  TextInput,
+  Button,
+  LoadingOverlay,
+  Group,
+} from "@mantine/core";
 import { useEffect, useState } from "react";
-import classes from "./TourGuide.module.css";
 
 export function TourGuide() {
   const [latitude, setLatitude] = useState("");
@@ -37,27 +42,22 @@ export function TourGuide() {
 
   return (
     <Container>
-      <div className={classes.searchBar}>
-        <span className={classes.inputBlock}>
-          Latitude:
-          <TextInput
-            value={latitude}
-            onChange={(e) => setLatitude(e.target.value)}
-            className={classes.coordinateInput}
-          />
-        </span>
-        <span className={classes.inputBlock}>
-          Longitude:
-          <TextInput
-            value={longitude}
-            onChange={(e) => setLongitude(e.target.value)}
-            className={classes.coordinateInput}
-          />
-        </span>
-        <Button className={classes.inputBlock} onClick={findAttractions}>
-          Guide Me!
-        </Button>
-      </div>
+      <LoadingOverlay visible={loading} />
+      <Group justify="left" align="flex-end">
+        <TextInput
+          required
+          label="Latitude"
+          value={latitude}
+          onChange={(e) => setLatitude(e.target.value)}
+        />
+        <TextInput
+          required
+          label="Longitude"
+          value={longitude}
+          onChange={(e) => setLongitude(e.target.value)}
+        />
+        <Button onClick={findAttractions}>Guide Me!</Button>
+      </Group>
       {loading ? <h3>Loading</h3> : null}
       <div>
         {attractions.map((item, i) => (