Developer Tools page

src/PolicyEngine.jsx

@@ -44,6 +44,8 @@ import CountryIdLayout from "./routing/CountryIdLayout";
 import RedirectBlogPost from "./routing/RedirectBlogPost";
 import { StatusPage } from "./pages/StatusPage";
 import ManifestosComparison from "./applets/ManifestosComparison";
+import DeveloperLayout from "./pages/DeveloperLayout";
+import DeveloperHome from "./pages/DeveloperHome";
 import CTCComparison from "./applets/CTCComparison";
 import { wrappedResponseJson } from "./data/wrappedJson";
 
@@ -299,6 +301,11 @@ export default function PolicyEngine() {
           <Route path="testimonials" element={<Testimonials />} />
           <Route path="calculator" element={<CalculatorInterstitial />} />
           <Route path="simulations" element={<SimulationsPage />} />
+          <Route path="developer-tools" element={<DeveloperLayout />}>
+            <Route index element={<DeveloperHome />} />
+            <Route path="simulations" element={<SimulationsPage />} />
+            <Route path="api_status" element={<StatusPage />} />
+          </Route>
           <Route path="research" element={<Outlet />}>
             <Route index={true} element={<Research />} />
             <Route path=":postName" element={<BlogPage />} />
@@ -350,7 +357,6 @@ export default function PolicyEngine() {
         </Route>
         <Route path="/uk/cec" element={<CitizensEconomicCouncil />} />
         <Route path="/uk/2024-manifestos" element={<ManifestosComparison />} />
-        <Route path="/:countryId/api_status" element={<StatusPage />} />
         <Route
           path="/us/trafwa-ctc-calculator"
           element={<TrafwaCalculator />}

src/data/developerToolsList.js

@@ -0,0 +1,18 @@
+// A JSON data structure that describes PolicyEngine Developer tools,
+// for use on the Developer Hub page
+import apiImage from "../images/devTools/apistatus.png";
+import simImage from "../images/devTools/simulation.png";
+export const devTools = [
+  {
+    title: "API Status",
+    desc: "Monitor the health and performance of the PolicyEngine API. View real-time status updates, scheduled maintenance notifications, and historical incident data to stay informed about the API's reliability and availability.",
+    path: "api_status",
+    image: apiImage,
+  },
+  {
+    title: "Policy Simulations",
+    desc: "View simulations that are currently running or have run in the past for the current version of the API. The table below updates every 15 seconds, providing you with real-time insights into your policy testing.",
+    path: "simulations",
+    image: simImage,
+  },
+];

src/layout/Footer.jsx

@@ -62,6 +62,11 @@ function LinkSection() {
       label: "Terms and Conditions",
       isInternal: true,
     },
+    {
+      link: `/${countryId}/developer-tools`,
+      label: "Developer Tools",
+      isInternal: true,
+    },
   ];
 
   const links = linkData.map((link, index) => {

src/pages/DeveloperHome.jsx

@@ -0,0 +1,192 @@
+import React, { useEffect } from "react";
+import Section from "../layout/Section";
+import { devTools } from "../data/developerToolsList";
+import style from "../style/index.js";
+import LinkButton from "../controls/LinkButton.jsx";
+import useDisplayCategory from "../hooks/useDisplayCategory.js";
+import { useLocation } from "react-router-dom";
+
+const DeveloperHome = () => {
+  const displayCategory = useDisplayCategory();
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+  return (
+    <>
+      <Section>
+        <div
+          style={
+            {
+              desktop: {
+                display: "grid",
+                gridTemplateColumns: "repeat(3, 1fr)", // Creates three equal columns
+                columnGap: "40px",
+                rowGap: "20px", // Adds some space between rows
+              },
+              tablet: {
+                display: "flex",
+                flexDirection: "column",
+                rowGap: "3rem",
+              },
+              mobile: {
+                display: "flex",
+                flexDirection: "column",
+                rowGap: "2rem",
+              },
+            }[displayCategory]
+          }
+        >
+          {devTools.map((tool, index) => (
+            <ToolsCard key={index} tool={tool} />
+          ))}
+        </div>
+      </Section>
+    </>
+  );
+};
+
+export default DeveloperHome;
+
+function ToolsCard({ tool }) {
+  const displayCategory = useDisplayCategory();
+  const mobile = displayCategory === "mobile";
+  const tablet = displayCategory === "tablet";
+
+  return (
+    <ToolsLayout
+      tablet={tablet}
+      mobile={mobile}
+      top={
+        <div
+          style={{
+            width: mobile ? "150px" : tablet ? "350px" : "100%",
+            height: mobile ? 150 : 300,
+          }}
+        >
+          {" "}
+          {/* Set width to 100% */}
+          <img
+            style={{
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+            }}
+            src={tool.image}
+            alt=""
+          />
+        </div>
+      }
+      bottomRight={
+        <div
+          style={{
+            marginRight: !mobile && 10,
+            marginBottom: !mobile && 10,
+            height: mobile && "100%",
+          }}
+        >
+          <LinkButton
+            text="Open"
+            link={`${tool.path}`}
+            width="100%"
+            height={"100%"}
+          />
+        </div>
+      }
+      style={{
+        backgroundColor: style.colors.LIGHT_GRAY,
+        // maxWidth: "1000px", // Set a max width for ToolBox
+        height: "100%",
+        position: "relative",
+      }}
+    >
+      <div
+        style={{
+          padding: "0",
+          minHeight: 100,
+          width: "100%", // Change to 100% for grid layout
+        }}
+      >
+        <h4
+          style={{
+            paddingTop: "1rem",
+            paddingLeft: "1rem",
+            paddingRight: "1rem",
+            width: `${mobile ? "150px" : "100%"}`,
+          }}
+        >
+          {tool.title}
+        </h4>
+        {displayCategory !== "mobile" && (
+          <p
+            style={{
+              paddingLeft: "1rem",
+              paddingTop: "10px",
+              paddingRight: "1rem",
+            }}
+          >
+            {tool.desc}
+          </p>
+        )}
+      </div>
+    </ToolsLayout>
+  );
+}
+
+function ToolsLayout({
+  children,
+  top,
+  tablet,
+
+  bottomRight,
+  noBorder,
+  style,
+  mobile,
+}) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        border: noBorder ? null : `1px solid black`,
+        ...style,
+        flexDirection: mobile ? "column" : "row",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: mobile ? "row" : tablet ? "row" : "column",
+          width: "100%",
+        }}
+      >
+        <div style={{ display: "flex", justifyContent: "space-between" }}>
+          {top}
+        </div>
+        <div
+          style={{
+            width: mobile && "100%",
+            display: "flex",
+            flexDirection: !mobile ? "column" : "row",
+            justifyContent: "space-between",
+            alignItems: "baseline",
+          }}
+        >
+          {children}
+          <div
+            style={{
+              display: "flex",
+              height: mobile && "100%",
+              justifyContent: "flex-end",
+              width: "100%",
+              marginTop: "auto",
+            }}
+          >
+            {/* <div>{bottomLeft}</div> */}
+            <div>{bottomRight}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/DeveloperLayout.jsx

@@ -0,0 +1,43 @@
+import Header from "../layout/Header.jsx";
+import Footer from "../layout/Footer.jsx";
+import style from "../style/index.js";
+import PageHeader from "../layout/PageHeader.jsx";
+import { Outlet, useLocation } from "react-router-dom";
+import { Helmet } from "react-helmet";
+
+export default function DeveloperLayout() {
+  const { pathname } = useLocation();
+
+  if (pathname.length > 20) {
+    return (
+      <main>
+        <Outlet />
+      </main>
+    );
+  }
+
+  return (
+    <main>
+      <Helmet>
+        <title>Developer Tools | PolicyEngine</title>
+      </Helmet>
+      <div>
+        <Header />
+
+        <PageHeader
+          title="Developer Tools"
+          backgroundColor={style.colors.BLUE_98}
+        >
+          <p style={{ margin: 0 }}>
+            Welcome to the Developer Tools page for PolicyEngine. This hub is
+            designed to enhance your experience with our open-source projects by
+            providing quick access to essential resources.
+          </p>
+        </PageHeader>
+
+        <Outlet />
+        <Footer />
+      </div>
+    </main>
+  );
+}

src/pages/Simulations.jsx

@@ -1,4 +1,3 @@
-import Header from "../layout/Header";
 import Footer from "../layout/Footer";
 import { apiCall } from "../api/call";
 import { Table } from "antd";
@@ -13,6 +12,7 @@ import CodeBlock from "../layout/CodeBlock";
 import PageHeader from "../layout/PageHeader";
 import style from "../style";
 import { Link } from "react-router-dom";
+import Header from "../layout/Header";
 
 export default function SimulationsPage() {
   // call /simulations endpoint, which returns

src/pages/StatusPage.jsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 
 import useMobile from "../layout/Responsive";
-import Header from "../layout/Header";
 import Footer from "../layout/Footer";
 import { countryApiCall, apiCall } from "../api/call";
 import {
@@ -13,6 +12,7 @@ import {
   COUNTRY_NAMES,
 } from "../data/countries";
 import { Helmet } from "react-helmet";
+import Header from "../layout/Header";
 import { wrappedResponseJson } from "../data/wrappedJson";
 
 function ApiStatus({ apiStatus, apiCategory, countryNames }) {