From 805d839c79a8228d0bc6165f6eaefcbbce63a36a Mon Sep 17 00:00:00 2001
From: Ben Bolte <ben@bolte.cc>
Date: Mon, 3 Jun 2024 17:08:03 -0700
Subject: [PATCH] about page (#44)

---
 frontend/src/App.tsx                    |  2 ++
 frontend/src/components/nav/Sidebar.tsx |  3 ++-
 frontend/src/pages/About.tsx            | 22 ++++++++++++++++++++++
 frontend/src/pages/Home.tsx             |  4 ++--
 4 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/pages/About.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 1b14a831..17799b72 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -5,6 +5,7 @@ import NotFoundRedirect from "components/NotFoundRedirect";
 import { AlertQueue, AlertQueueProvider } from "hooks/alerts";
 import { AuthenticationProvider, OneTimePasswordWrapper } from "hooks/auth";
 import { ThemeProvider } from "hooks/theme";
+import About from "pages/About";
 import Home from "pages/Home";
 import NotFound from "pages/NotFound";
 import PartDetails from "pages/PartDetails";
@@ -28,6 +29,7 @@ const App = () => {
                 <Container className="content">
                   <Routes>
                     <Route path="/" element={<Home />} />
+                    <Route path="/about" element={<About />} />
                     <Route path="/robots/" element={<Robots />} />
                     <Route path="/robot/:id" element={<RobotDetails />} />
                     <Route path="/parts/" element={<Parts />} />
diff --git a/frontend/src/components/nav/Sidebar.tsx b/frontend/src/components/nav/Sidebar.tsx
index 5cbe8a55..6f84595e 100644
--- a/frontend/src/components/nav/Sidebar.tsx
+++ b/frontend/src/components/nav/Sidebar.tsx
@@ -1,5 +1,6 @@
 import AuthComponent from "components/auth/AuthComponent";
 import { Col, Offcanvas, Row } from "react-bootstrap";
+import { Link } from "react-router-dom";
 
 interface Props {
   show: boolean;
@@ -23,7 +24,7 @@ const Sidebar = ({ show, onHide }: Props) => {
           <AuthComponent />
           <Row style={{ marginTop: "auto" }} />
           <Row>
-            <a href="#">About</a>
+            <Link to="/about">About</Link>
           </Row>
           <Row>
             <a href="#">Privacy Policy</a>
diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx
new file mode 100644
index 00000000..bfc342ed
--- /dev/null
+++ b/frontend/src/pages/About.tsx
@@ -0,0 +1,22 @@
+import { Container, Row } from "react-bootstrap";
+
+const About = () => {
+  return (
+    <Container className="pt-5" style={{ textAlign: "center" }} fluid>
+      <Row className="mb-5">
+        <h1 className="display-4">about</h1>
+        <p className="lead">
+          This is a simple platform for aggregating robots, robot parts and
+          build guides.
+        </p>
+        <p>
+          It is maintained by <a href="https://kscale.dev/">K-Scale Labs</a>{" "}
+          with source code freely available on{" "}
+          <a href="https://github.com/kscalelabs/store">Github</a>.
+        </p>
+      </Row>
+    </Container>
+  );
+};
+
+export default About;
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index cc18b092..8e7bc91f 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -1,7 +1,7 @@
 import { Card, Col, Row } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
 
-const RobotDetails = () => {
+const Home = () => {
   const navigate = useNavigate();
 
   return (
@@ -32,4 +32,4 @@ const RobotDetails = () => {
   );
 };
 
-export default RobotDetails;
+export default Home;