mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fake metrics

Browse Source
This commit is contained in:
m5r 2021-08-29 03:56:26 +08:00
parent 4bf7b108f3
commit 39e0b8ca03
2 changed files with 86 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/public-area/pages/open-metrics.tsx
View File

@ -21,9 +21,19 @@ const OpenMetrics: BlitzPage = () => {
<Header /> <Header />
<main className="flex-grow"> <main className="flex-grow">
<section> <section className="max-w-6xl mx-auto px-4 sm:px-6">
<div 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="pt-32 pb-10 md:pt-34 md:pb-16">Open Metrics</div> <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">
<Card title="Phone Numbers Registered" value={41} />
<Card title="SMS Exchanged" value={4929} />
<Card title="Minutes on Call" value={1612} />
</dl>
</div>
</div> </div>
</section> </section>
</main> </main>
@ -33,6 +43,15 @@ const OpenMetrics: BlitzPage = () => {
); );
}; };
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>
);
}
OpenMetrics.suppressFirstRenderFlicker = true; OpenMetrics.suppressFirstRenderFlicker = true;
export default OpenMetrics; export default OpenMetrics;

130
app/public-area/pages/roadmap.tsx
View File

@ -23,78 +23,76 @@ const Roadmap: BlitzPage = () => {
<Header /> <Header />
<main className="flex-grow"> <main className="flex-grow">
<section> <section className="max-w-6xl mx-auto px-4 sm:px-6">
<div 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="pt-32 pb-10 md:pt-34 md:pb-16"> <div className="max-w-5xl mx-auto">
<div className="max-w-5xl mx-auto"> <h1 className="h1 mb-16 font-extrabold font-mackinac">(Rough) Roadmap</h1>
<h1 className="h1 mb-16 font-extrabold font-mackinac">(Rough) Roadmap</h1> </div>
</div>
<div className="max-w-2xl mx-auto text-lg xl:text-xl flow-root"> <div className="max-w-3xl mx-auto text-lg xl:text-xl flow-root">
<ul role="list" className="-mb-8"> <ul role="list" className="-mb-8">
{roadmap.map((feature, index) => { {roadmap.map((feature, index) => {
const isDone = feature.status === "done"; const isDone = feature.status === "done";
const isInProgress = feature.status === "in-progress"; const isInProgress = feature.status === "in-progress";
return ( return (
<li key={feature.name}> <li key={feature.name}>
<div className="relative pb-8"> <div className="relative pb-8">
{index !== roadmap.length - 1 ? ( {index !== roadmap.length - 1 ? (
<span
className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
aria-hidden="true"
/>
) : null}
<div className="relative flex space-x-3">
<div>
<span <span
className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" className={clsx(
aria-hidden="true" isDone
/> ? "bg-green-500"
) : null} : isInProgress
<div className="relative flex space-x-3"> ? "bg-yellow-500"
<div> : "bg-gray-400",
<span "h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white",
className={clsx( )}
isDone >
? "bg-green-500"
: isInProgress
? "bg-yellow-500"
: "bg-gray-400",
"h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white",
)}
>
{isDone ? (
<CheckIcon
className="h-5 w-5 text-white"
aria-hidden="true"
/>
) : isInProgress ? (
<TerminalIcon
className="h-5 w-5 text-white"
aria-hidden="true"
/>
) : (
<XIcon
className="h-5 w-5 text-white"
aria-hidden="true"
/>
)}
</span>
</div>
<div className="min-w-0 flex-1 items-center flex justify-between space-x-4">
<div>
<p className="text-md xl:text-lg text-gray-900">
{feature.name}
</p>
</div>
{isDone ? ( {isDone ? (
<div className="text-right self-start text-md xl:text-lg whitespace-nowrap text-gray-500"> <CheckIcon
<time> className="h-5 w-5 text-white"
{formatter.format(feature.doneDate)} aria-hidden="true"
</time> />
</div> ) : isInProgress ? (
) : null} <TerminalIcon
className="h-5 w-5 text-white"
aria-hidden="true"
/>
) : (
<XIcon
className="h-5 w-5 text-white"
aria-hidden="true"
/>
)}
</span>
</div>
<div className="min-w-0 flex-1 items-center flex justify-between space-x-4">
<div>
<p className="text-md xl:text-lg text-gray-900">
{feature.name}
</p>
</div> </div>
{isDone ? (
<div className="text-right self-start text-md xl:text-lg whitespace-nowrap text-gray-500">
<time>
{formatter.format(feature.doneDate)}
</time>
</div>
) : null}
</div> </div>
</div> </div>
</li> </div>
); </li>
})} );
</ul> })}
</div> </ul>
</div> </div>
</div> </div>
</section> </section>