refactor: prebuilt components cleanup

src/components/Footer/index.tsx

 import { stringToSlug } from "../../utils";
 
-function ExampleFooter() {
+function WikiFooter() {
   const teamYear = import.meta.env.VITE_TEAM_YEAR;
   const teamName = import.meta.env.VITE_TEAM_NAME;
   const teamSlug = stringToSlug(teamName);
@@ -79,4 +79,4 @@ function ExampleFooter() {
   );
 }
 
-export default ExampleFooter;
+export default WikiFooter;

src/components/Header/index.tsx

@@ -5,7 +5,7 @@ interface HeaderProps {
   lead: string;
 }
 
-const ExampleHeader: React.FC<HeaderProps> = ({ title, lead }) => {
+const WikiHeader: React.FC<HeaderProps> = ({ title, lead }) => {
   return (
     <header className="bg-hero py-5 mb-5">
       <div className="container h-100">
@@ -20,4 +20,4 @@ const ExampleHeader: React.FC<HeaderProps> = ({ title, lead }) => {
   );
 };
 
-export default ExampleHeader;
+export default WikiHeader;

src/components/Navbar/index.tsx

@@ -5,33 +5,39 @@ import NavDropdown from "react-bootstrap/NavDropdown";
 import { Link } from "react-router-dom";
 import Pages from "../../pages.ts";
 
-function ExampleNavbar() {
-  const pages = [];
-  for (const page of Pages) {
-    if ("folder" in page && page.folder) {
-      const folder = [];
-      for (const subpage of page.folder) {
-        if ("path" in subpage && subpage.path) {
-          folder.push(
-            <NavDropdown.Item as={Link} to={subpage.path} target="_blank">
+function WikiNavbar() {
+  const pages = Pages.map((item, pageIndex) => {
+    if ("folder" in item && item.folder) {
+      const folderItems = item.folder.map((subpage, subpageIndex) => {
+        if (subpage.path) {
+          return (
+            <NavDropdown.Item
+              key={`subpage-${pageIndex}-${subpageIndex}`}
+              as={Link}
+              to={subpage.path}
+            >
               {subpage.name}
-            </NavDropdown.Item>,
+            </NavDropdown.Item>
           );
         }
-      }
-      pages.push(
-        <NavDropdown title={page.name} id="basic-nav-dropdown">
-          {folder}
-        </NavDropdown>,
+      });
+      return (
+        <NavDropdown
+          key={`page-${pageIndex}`}
+          title={item.name}
+          id="basic-nav-dropdown"
+        >
+          {folderItems}
+        </NavDropdown>
       );
-    } else if ("path" in page && page.path) {
-      pages.push(
-        <Nav.Link as={Link} to={page.path} target="_blank">
-          {page.name}
-        </Nav.Link>,
+    } else if ("path" in item && item.path) {
+      return (
+        <Nav.Link key={`page-${pageIndex}`} as={Link} to={item.path}>
+          {item.name}
+        </Nav.Link>
       );
     }
-  }
+  });
 
   return (
     <Navbar expand="lg" className="bg-body-tertiary" fixed="top">
@@ -46,4 +52,4 @@ function ExampleNavbar() {
   );
 }
 
-export default ExampleNavbar;
+export default WikiNavbar;

src/components/NotFound/index.tsx

@@ -4,11 +4,11 @@ function NotFound() {
   return (
     <>
       <div className="d-flex flex-column justify-content-center align-items-center">
-        <h1 className="not-found-title" style={{ fontSize: "56pt" }}>
+        <h1 className="not-found-title" style={{ fontSize: "100pt" }}>
           404
         </h1>
-        <div>
-          <Link to="/" className="btn btn-secondary btn-xl">
+        <div className="my-5">
+          <Link to="/" className="btn btn-secondary btn-lg">
             Back to Home
           </Link>
         </div>

src/containers/App/App.tsx

@@ -46,7 +46,7 @@ const App = () => {
               <>
                 <Header
                   title="Not Found"
-                  lead="The page you are looking for does not exist."
+                  lead="The requested URL was not found on this server."
                 />
                 <NotFound />
               </>