cityofaustin · chiaberry · Jan 22, 2024 · Jan 22, 2024 · Feb 21, 2024 · Feb 21, 2024
diff --git a/components/Nav.js b/components/Nav.js
@@ -2,15 +2,15 @@ import React from "react";
 import { Image, Nav as BsNav, Navbar, Container } from "react-bootstrap";
 import Link from "next/link";
 
-export default function Nav({ isHome }) {
+export default function Nav({ isHome, navLinkHref = "/" }) {
   return (
     <>
       <Navbar
         expand="lg"
         className={`py-1 ${isHome ? "nav-shadow" : "border"}`}
       >
         <Container fluid key="nav-container">
-          <Link href="/" passHref>
+          <Link href={navLinkHref} passHref>
             <Navbar.Brand
               style={{ cursor: "pointer" }}
               className="ps-2 me-auto"

diff --git a/components/NavTile.js b/components/NavTile.js
@@ -1,7 +1,6 @@
 import Link from "next/link";
 import Card from "react-bootstrap/Card";
 import { FaExternalLinkAlt } from "react-icons/fa";
-import IconLabel from "./IconLabel";
 
 const ExternalLinkTitle = ({ title }) => (
   <div className={`d-flex flex-column`}>

diff --git a/components/pages/dash/VizTile.js b/components/pages/dash/VizTile.js
@@ -0,0 +1,58 @@
+import Card from "react-bootstrap/Card";
+import { FaLock } from "react-icons/fa";
+
+function InternalDatasetTitle({ title }) {
+  return (
+    <div className={`d-flex flex-column`}>
+      <div className="d-flex align-items-center">
+        <span className="me-1">{title}</span>
+        <span className="text-muted" style={{ fontSize: ".75rem" }}>
+          <FaLock />
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export default function VizTile({
+  href,
+  title,
+  description,
+  imgSrc,
+  imgAltText,
+  publiclyAccessible,
+}) {
+  return (
+    <a
+      className="text-decoration-none"
+      href={href}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <Card className="h-100 nav-tile">
+        {imgSrc ? (
+          <Card.Img variant="top" alt={imgAltText} src={imgSrc} />
+        ) : (
+          <Card.Img
+            variant="top"
+            alt="No image available"
+            src="../assets/laptop_data_pres_logo.png"
+            height="150px"
+          />
+        )}
+        <Card.Body className="p-3 lh-1">
+          <Card.Title className="fw-bold fs-6 text-primary">
+            {!publiclyAccessible ? (
+              <InternalDatasetTitle title={title} />
+            ) : (
+              title
+            )}
+          </Card.Title>
+          <span className="text-muted ">
+            <small>{description}</small>
+          </span>
+        </Card.Body>
+      </Card>
+    </a>
+  );
+}
diff --git a/page-settings/dash.js b/page-settings/dash.js
@@ -0,0 +1,17 @@
+export const KNACK_HEADERS = {
+  "X-Knack-Application-Id": "64f9f02e4a14dd0027633bcd",
+  "X-Knack-REST-API-KEY": "knack",
+};
+
+export const KNACK_URL =
+  "https://api.knack.com/v1/pages/scene_229/views/view_414/records";
+
+export const KNACK_FIELDS_MAP = {
+  publishRecord: "field_724_raw",
+  title: "field_718",
+  url: "field_721_raw",
+  imgSrc: "field_719_raw",
+  description: "field_720",
+  altText: "field_723",
+  publiclyAccessible: "field_722_raw",
+};
diff --git a/pages/dash.js b/pages/dash.js
@@ -0,0 +1,81 @@
+import { useMemo } from "react";
+import Head from "next/head";
+import Container from "react-bootstrap/Container";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import Nav from "../components/Nav";
+import Spinner from "../components/Spinner";
+import VizTile from "../components/pages/dash/VizTile";
+import {
+  KNACK_HEADERS,
+  KNACK_URL,
+  KNACK_FIELDS_MAP,
+} from "../page-settings/dash";
+import { useKnack } from "../utils/knack";
+
+const DESCRIPTION = "Dashboards, reports, maps & datasets by & for TPW";
+
+export default function DataVisualizations() {
+  const { data, loading, error } = useKnack(KNACK_URL, KNACK_HEADERS);
+
+  const visibleRecords = useMemo(
+    () =>
+      data?.records.filter(
+        (record) => record[KNACK_FIELDS_MAP["publishRecord"]],
+      ),
+    [data],
+  );
+
+  error && console.error(error);
+
+  if (loading) {
+    return <Spinner />;
+  }
+
+  return (
+    <>
+      <Head>
+        <title>Dash</title>
+        <meta property="og:title" content="Austin TPW Dash" />
+      </Head>
+      <div className="wrapper">
+        <Nav navLinkHref="/dash" />
+        <Container className="main">
+          <Row>
+            <Col xs={12} className="pt-5 text-center">
+              <h1 className="text-primary fw-bold">Dash</h1>
+            </Col>
+          </Row>
+          <Row className="mb-2 border-bottom">
+            <Col xs={12} className="text-center">
+              <p className="text-muted">{DESCRIPTION}</p>
+            </Col>
+          </Row>
+          <Row className="text-dts-4 mb-4">
+            {visibleRecords.map((viz) => (
+              <Col
+                key={viz.id}
+                xs={12}
+                md={4}
+                lg={3}
+                className="p-2 p-md-3 p-xl-4"
+              >
+                <VizTile
+                  href={viz[KNACK_FIELDS_MAP["url"]].url}
+                  title={viz[KNACK_FIELDS_MAP["title"]]}
+                  imgSrc={viz[KNACK_FIELDS_MAP["imgSrc"]].url}
+                  description={viz[KNACK_FIELDS_MAP["description"]]}
+                  imgAltText={viz[KNACK_FIELDS_MAP["altText"]]}
+                  publiclyAccessible={
+                    viz[KNACK_FIELDS_MAP["publiclyAccessible"]]
+                  }
+                />
+              </Col>
+            ))}
+          </Row>
+        </Container>
+        <Container fluid className="footer mt-5 p-5" />
+      </div>
+    </>
+  );
+}
diff --git a/public/assets/laptop_data_pres_logo.png b/public/assets/laptop_data_pres_logo.png
diff --git a/utils/knack.js b/utils/knack.js
@@ -0,0 +1,13 @@
+import useSWR from "swr";
+
+const fetcher = (url, headers) => fetch(url, { headers: headers }).then((res) => res.json());
+
+
+export function useKnack(url, headers) {
+  const { data, error } = useSWR([url, headers], fetcher);
+  return {
+    data: data,
+    loading: !error && !data,
+    error: error,
+  };
+}