Converted to Material UI v7 - bare.

src/components/Footer.jsx

@@ -1,27 +1,58 @@
-import React from 'react';
-import { VERSION } from '../version';
+import React from "react";
+import { Box, Typography, Container, Link, Grid } from "@mui/material";
+import { VERSION } from "../version";
 
 function Footer() {
   return (
-    <footer className="bg-light border-top mt-2 py-2 flex-shrink-0">
-      <div className="container">
-        <div className="row">
-          <div className="col-md-6">
-            <p className="mb-0 text-muted small">
-              <strong>JMESPath Testing Tool</strong> {VERSION === 'unknown' ? VERSION : `v${VERSION}`} - Created for testing and validating JMESPath expressions
-            </p>
-          </div>
-          <div className="col-md-6 text-md-end">
-            <p className="mb-0 text-muted small">
-              Licensed under <a href="https://opensource.org/licenses/MIT" target="_blank" rel="noopener noreferrer" className="text-decoration-none">MIT License</a> |
-              <a href="https://jmespath.org/" target="_blank" rel="noopener noreferrer" className="text-decoration-none ms-2">
+    <Box
+      component="footer"
+      sx={{
+        py: 2,
+        mt: 2,
+        borderTop: 1,
+        borderColor: "divider",
+        bgcolor: "background.paper",
+        flexShrink: 0,
+      }}
+    >
+      <Container maxWidth="xl">
+        <Grid container spacing={2} alignItems="center">
+          <Grid size={{ xs: 12, md: 6 }}>
+            <Typography variant="body2" color="text.secondary">
+              <strong>JMESPath Testing Tool</strong>{" "}
+              {VERSION === "unknown" ? VERSION : `v${VERSION}`} - Created for
+              testing and validating JMESPath expressions
+            </Typography>
+          </Grid>
+          <Grid size={{ xs: 12, md: 6 }} sx={{ textAlign: { md: "right" } }}>
+            <Typography variant="body2" color="text.secondary">
+              Licensed under{" "}
+              <Link
+                href="https://opensource.org/licenses/MIT"
+                target="_blank"
+                rel="noopener noreferrer"
+                color="primary"
+                underline="hover"
+                sx={{ fontWeight: 500 }}
+              >
+                MIT License
+              </Link>{" "}
+              |{" "}
+              <Link
+                href="https://jmespath.org/"
+                target="_blank"
+                rel="noopener noreferrer"
+                color="primary"
+                underline="hover"
+                sx={{ ml: 1, fontWeight: 500 }}
+              >
                 Learn JMESPath
-              </a>
-            </p>
-          </div>
-        </div>
-      </div>
-    </footer>
+              </Link>
+            </Typography>
+          </Grid>
+        </Grid>
+      </Container>
+    </Box>
   );
 }