2021-08-28 07:16:32 +00:00
|
|
|
import type { BlitzPage } from "blitz";
|
2021-08-28 20:17:01 +00:00
|
|
|
import { Head, useQuery } from "blitz";
|
|
|
|
|
|
|
|
|
|
import getMetrics from "../queries/get-metrics";
|
2021-08-28 07:16:32 +00:00
|
|
|
|
|
|
|
|
import Header from "../components/header";
|
2021-08-29 21:11:45 +00:00
|
|
|
import Footer from "../components/footer";
|
2021-08-28 07:16:32 +00:00
|
|
|
|
2021-08-28 20:17:01 +00:00
|
|
|
const initialData = {
|
|
|
|
|
phoneNumbers: 0,
|
|
|
|
|
smsExchanged: 0,
|
|
|
|
|
minutesCalled: 0,
|
|
|
|
|
};
|
|
|
|
|
|
2021-08-28 07:16:32 +00:00
|
|
|
const OpenMetrics: BlitzPage = () => {
|
2021-08-28 20:17:01 +00:00
|
|
|
const [metrics] = useQuery(getMetrics, {}, { suspense: false, initialData });
|
|
|
|
|
const { phoneNumbers, smsExchanged, minutesCalled } = metrics ?? initialData;
|
|
|
|
|
|
2021-08-28 07:16:32 +00:00
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>Shellphone: Your Personal Cloud Phone</title>
|
|
|
|
|
<link
|
|
|
|
|
rel="preload"
|
|
|
|
|
href="/fonts/P22MackinacPro-ExtraBold.woff2"
|
|
|
|
|
as="font"
|
|
|
|
|
type="font/woff2"
|
|
|
|
|
crossOrigin="anonymous"
|
|
|
|
|
/>
|
|
|
|
|
</Head>
|
|
|
|
|
<section className="font-inter antialiased bg-white text-gray-900 tracking-tight">
|
|
|
|
|
<section className="flex flex-col min-h-screen overflow-hidden">
|
|
|
|
|
<Header />
|
|
|
|
|
|
|
|
|
|
<main className="flex-grow">
|
2021-08-28 19:56:26 +00:00
|
|
|
<section className="max-w-6xl mx-auto px-4 sm:px-6">
|
|
|
|
|
<div className="pt-32 pb-10 md:pt-34 md:pb-16">
|
|
|
|
|
<div className="max-w-5xl mx-auto">
|
|
|
|
|
<h1 className="h1 mb-16 font-extrabold font-mackinac">Open Metrics</h1>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="max-w-3xl mx-auto text-lg xl:text-xl flow-root">
|
|
|
|
|
<dl className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
|
2021-08-28 20:17:01 +00:00
|
|
|
<Card title="Phone Numbers Registered" value={phoneNumbers} />
|
|
|
|
|
<Card title="SMS Exchanged" value={smsExchanged} />
|
|
|
|
|
<Card title="Minutes on Call" value={minutesCalled} />
|
2021-08-28 19:56:26 +00:00
|
|
|
</dl>
|
|
|
|
|
</div>
|
2021-08-28 07:16:32 +00:00
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</main>
|
2021-08-29 21:11:45 +00:00
|
|
|
|
|
|
|
|
<Footer />
|
2021-08-28 07:16:32 +00:00
|
|
|
</section>
|
|
|
|
|
</section>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
2021-08-28 19:56:26 +00:00
|
|
|
function Card({ title, value }: any) {
|
|
|
|
|
return (
|
|
|
|
|
<div className="px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6">
|
|
|
|
|
<dt className="text-sm font-medium text-gray-500 truncate">{title}</dt>
|
|
|
|
|
<dd className="mt-1 text-3xl font-semibold text-gray-900">{value}</dd>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2021-08-28 07:16:32 +00:00
|
|
|
OpenMetrics.suppressFirstRenderFlicker = true;
|
|
|
|
|
|
|
|
|
|
export default OpenMetrics;
|
