feat: summary stats on repo report

src/app/repo/status/page.js

@@ -9,6 +9,7 @@ import {
 import Heading from "@/components/Heading";
 import List from "@/components/List";
 import checks from "@/utils/checks/index";
+import Stats from "@/components/Stats";
 
 const repo = {
   id: 405139301,
@@ -210,7 +211,14 @@ export default function Page() {
           { icon: TicketIcon, text: repo.open_issues },
         ]}
       />
-      <List data={results} />
+      <Stats
+        data={[
+          { name: "Success", stat: results.summary.success?.length || 0 },
+          { name: "Warning", stat: results.summary.warning?.length || 0 },
+          { name: "Error", stat: results.summary.error?.length || 0 },
+        ]}
+      />
+      <List data={results.checks} />
     </>
   );
 }

src/components/Heading.js

@@ -2,7 +2,7 @@ import Link from "next/link";
 
 export default function Heading({ title, actions = [], extras = [] }) {
   return (
-    <div className="lg:flex lg:items-center lg:justify-between mt-4 mb-12">
+    <div className="lg:flex lg:items-center lg:justify-between mt-4">
       <div className="min-w-0 flex-1">
         <h2 className="text-2xl font-bold leading-7 text-white sm:truncate sm:text-3xl sm:tracking-tight">
           {title}

src/components/Stats.js

@@ -0,0 +1,24 @@
+export default function Stats({ data }) {
+  return (
+    <div>
+      <h3 className="text-base font-semibold leading-6 text-gray-900">
+        Last 30 days
+      </h3>
+      <dl className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
+        {data.map((item) => (
+          <div
+            key={item.name}
+            className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6"
+          >
+            <dt className="truncate text-sm font-medium text-gray-500">
+              {item.name}
+            </dt>
+            <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">
+              {item.stat}
+            </dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  );
+}

src/utils/checks/index.js

@@ -6,5 +6,7 @@ import url from "./url";
 export default function checks(repo) {
   const checks = [description(repo), url(repo), topics(repo), activity(repo)];
 
-  return checks;
+  const summary = Object.groupBy(checks, ({ status }) => status);
+
+  return { checks, summary };
 }