diff --git a/next/components/thumbprint-roadmap/overview/overview.jsx b/next/components/thumbprint-roadmap/overview/overview.jsx
new file mode 100644
index 00000000..359d3615
--- /dev/null
+++ b/next/components/thumbprint-roadmap/overview/overview.jsx
@@ -0,0 +1,87 @@
+/* eslint-disable import/prefer-default-export */
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Text, Pill } from '@thumbtack/thumbprint-react';
+import { tpColorGray300 } from '@thumbtack/thumbprint-tokens';
+import styles from './overview.module.scss';
+
+export const ComponentRow = ({ task, description, status, releaseDate}) => (
+ <>
+
+ |
+ {task}
+ |
+
+ {description}
+ |
+
+ {status}
+ |
+
+ {releaseDate}
+ |
+
+
+);
+
+ComponentRow.propTypes = {
+ task: String,
+ description: String,
+ status: String,
+ releaseDate: String,
+};
+
+export const ComponentTable = ({ children }) => (
+
+
+
+ {/*
+ The `boxShadow` is used instead of `border` because of:
+ https://stackoverflow.com/q/41882616/316602
+ */}
+ |
+ Name
+ |
+
+ Description
+ |
+
+ Status
+ |
+
+ Release date
+ |
+
+
+ {children}
+
+);
+
+ComponentTable.propTypes = {
+ children: PropTypes.node.isRequired,
+};
diff --git a/next/components/thumbprint-roadmap/overview/overview.module.scss b/next/components/thumbprint-roadmap/overview/overview.module.scss
new file mode 100644
index 00000000..63fa3302
--- /dev/null
+++ b/next/components/thumbprint-roadmap/overview/overview.module.scss
@@ -0,0 +1,28 @@
+@import '~@thumbtack/thumbprint-tokens/dist/scss/_index';
+
+.dot {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ display: inline-block;
+}
+
+.dotDone {
+ background: $tp-color__green;
+}
+
+.dotInProgress {
+ border: 2px solid $tp-color__yellow;
+}
+
+.dotToDo {
+ border: 2px solid $tp-color__blue;
+}
+
+.dotNotApplicable {
+ background: $tp-color__gray;
+}
+
+.dotDeprecated {
+ background: $tp-color__red-300;
+}
diff --git a/next/pages/overview/roadmap.tsx b/next/pages/overview/roadmap.tsx
new file mode 100644
index 00000000..1bdaaf1a
--- /dev/null
+++ b/next/pages/overview/roadmap.tsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import type { InferGetStaticPropsType } from 'next';
+import { groupBy, keyBy } from 'lodash-es';
+import { Text } from '@thumbtack/thumbprint-react';
+import getLayoutProps from '../../utils/get-layout-props';
+import Alert from '../../components/alert/alert';
+import InlineCode from '../../components/inline-code/inline-code';
+import {
+ ComponentRow,
+ ComponentTable,
+} from '../../components/thumbprint-roadmap/overview/overview';
+import { ContentPage } from '../../components/mdx/mdx';
+
+interface Implementation {
+ browserLink: string;
+ createdAt: string;
+ href: string;
+ id: string;
+ index: number;
+ name: string;
+ type: string;
+ updatedAt: string;
+ values: {
+ Component: string;
+ Platform: string;
+ 'Ship date': string;
+ Source: string;
+ Design: string;
+ Documentation: string;
+ 'Start date': string;
+ 'Row ID': string;
+ 'JIRA Ticket': string;
+ 'Name used in implementation': string;
+ Developer: string;
+ 'Start (in days)': string;
+ 'Development status': string;
+ 'Design status': string;
+ 'Documentation status': string;
+ };
+}
+
+interface Roadmap {
+ browserLink: string;
+ createdAt: string;
+ href: string;
+ id: string;
+ index: number;
+ name: string;
+ type: string;
+ updatedAt: string;
+ values: {
+ Task: string;
+ Description: string;
+ Status: string;
+ 'Release Date': string;
+ };
+}
+
+export default function Components({
+ roadmaps,
+ layoutProps,
+}: InferGetStaticPropsType): JSX.Element {
+ return (
+
+ {roadmaps.length === 0 && (
+
+ You’ll need to add CODA_API_TOKEN environment variable
+ to a www/.env file in order to see the component
+ statuses while developing locally. Read the{' '}
+
+ CONTRIBUTING.md
+ {' '}
+ file for help.
+
+ )}
+
+
+ {roadmaps.map(item => {
+
+ return (
+
+ );
+ })}
+
+
+ );
+}
+
+export const getStaticProps = async () => {
+ const listRowsRes = await fetch(
+ // https://coda.io/developers/apis/v1#operation/listRows
+ `https://coda.io/apis/v1/docs/bXyUQb2tJW/tables/PublicRoadmap/rows?useColumnNames=true`,
+ {
+ headers: {
+ Authorization: `Bearer ${process.env.CODA_API_TOKEN}`,
+ },
+ },
+ );
+
+ const data = listRowsRes.ok ? await listRowsRes.json() : null;
+ const roadmaps: Roadmap[] = data ? data.items : [];
+
+ // const groupedImplementations = groupBy(roadmaps, implementation => {
+ // return implementation.values.Name;
+ // });
+
+ // const groupedAndSortedImplementations = Object.keys(groupedImplementations)
+ // .sort()
+ // .map(key => {
+ // return groupedImplementations[key];
+ // });
+
+ return {
+ props: {
+ layoutProps: getLayoutProps(),
+ roadmaps: roadmaps,
+ },
+ };
+};