From 942a4c42c2236a8fea6c2e5526e5975a9da4307e Mon Sep 17 00:00:00 2001
From: James Pace <jpace121@gmail.com>
Date: Sat, 7 Mar 2026 13:27:33 +0000
Subject: [PATCH] Change name. Hack on image.

---
 src/AppNav.tsx |  4 ++--
 src/Home.tsx   | 35 ++++++++++++++++++++---------------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/AppNav.tsx b/src/AppNav.tsx
index 9d52852..58f72d8 100644
--- a/src/AppNav.tsx
+++ b/src/AppNav.tsx
@@ -6,7 +6,7 @@ export function AppNav() {
     <Navbar bg="dark" variant="dark" expand="sm" className="py-0">
       <Container className="me-auto">
         <Navbar.Brand as={Link} to="/">
-          N-DRIVE
+          J7-Bridge
         </Navbar.Brand>
         <Navbar.Toggle aria-controls="collapse-navbar-nav" />
         <Navbar.Collapse id="collapse-navbar-nav">
@@ -28,5 +28,5 @@ export function AppNav() {
 }
 
 export function Footer() {
-  return <p className="footer">Made with {"<3"} by James Pace.</p>;
+  return <p className="footer">Copyright 2026 James Pace</p>;
 }
diff --git a/src/Home.tsx b/src/Home.tsx
index 31a767a..7cd58e7 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -1,21 +1,21 @@
 import { AppNav, Footer } from "./AppNav.tsx";
-import { Container, Row, Col, Image } from "react-bootstrap";
+import { Container, Row, Col, Image, Card } from "react-bootstrap";
 import { atom, useAtom } from "jotai";
 import { atomWithQuery } from "jotai-tanstack-query";
 
 const costmapImageQuery = async () => {
-    const resp = await fetch("api/costmap_image");
-    if (!resp.ok) {
-        throw new Error("Network response was not ok");
-    }
-    const blob = await resp.blob();
-    return URL.createObjectURL(blob);
+  const resp = await fetch("api/costmap_image");
+  if (!resp.ok) {
+    throw new Error("Network response was not ok");
+  }
+  const blob = await resp.blob();
+  return URL.createObjectURL(blob);
 };
 
 const costmapImageAtom = atomWithQuery(() => ({
-    queryKey: ["costmap_image"],
-    queryFn: costmapImageQuery,
-    refetchInterval: 1000 // 1s
+  queryKey: ["costmap_image"],
+  queryFn: costmapImageQuery,
+  refetchInterval: 1000, // 1s
 }));
 
 export function Home() {
@@ -23,18 +23,23 @@ export function Home() {
 
   let costmapImage = () => {
     if (isPending) {
-        return (<p>"Loading..."</p>);
+      return <p>"Loading..."</p>;
     }
     if (isError) {
-        return(<p>"Error!"</p>);
+      return <p>"Error!"</p>;
     }
-      return (<Image src={data} />);
+    return <Image src={data} />;
   };
   return (
     <div>
       <AppNav />
-      <Container>
-          { costmapImage() }
+      <Container className="vert-padded">
+        <Card className="padded">
+          <Row>
+            <Col lg={8}>{costmapImage()}</Col>
+            <Col lg={4}></Col>
+          </Row>
+        </Card>
       </Container>
       <Footer />
     </div>