shellphone.app/app/public-area/pages/roadmap.tsx

131 lines
3.0 KiB
TypeScript

import type { BlitzPage } from "blitz";
import clsx from "clsx";
import { IoClose, IoCheckmark, IoCodeSlash } from "react-icons/io5";
import Layout from "../components/layout";
const Roadmap: BlitzPage = () => {
return (
<ul role="list" className="-mb-8">
{roadmap.map((feature, index) => {
const isDone = feature.status === "done";
const isInProgress = feature.status === "in-progress";
return (
<li key={feature.name}>
<div className="relative pb-8">
{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
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 ? (
<IoCheckmark className="h-5 w-5 text-white" aria-hidden="true" />
) : isInProgress ? (
<IoCodeSlash className="h-5 w-5 text-white" aria-hidden="true" />
) : (
<IoClose 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>
</div>
</div>
</li>
);
})}
</ul>
);
};
type RoadmapItem = {
name: string;
doneDate?: unknown;
} & (
| {
status: "done";
doneDate: Date;
}
| {
status: "in-progress";
}
| {
status: "to-do";
}
);
const roadmap: RoadmapItem[] = [
{
name: "Send SMS",
status: "done",
doneDate: new Date("2021-07-18T15:33:08Z"),
},
{
name: "Receive SMS",
status: "done",
doneDate: new Date("2021-08-01T10:54:51Z"),
},
{
name: "Make a phone call",
status: "done",
doneDate: new Date("2021-09-04T16:29:00"),
},
{
name: "Receive a phone call",
status: "in-progress",
},
{
name: "Get notified of incoming messages and calls",
status: "to-do",
},
{
name: "Remove any phone call or message from history",
status: "to-do",
},
{
name: "Allow incoming calls to go to voicemail",
status: "to-do",
},
{
name: "Forward incoming messages and phone calls to your desired phone number",
status: "to-do",
},
{
name: "Import contacts from your mobile phone",
status: "to-do",
},
{
name: "Use Shellphone with multiple phone numbers at once",
status: "to-do",
},
{
name: "Port your phone number to Shellphone - you won't have to deal with Twilio anymore!",
status: "to-do",
},
{
name: "Send delayed messages",
status: "to-do",
},
{
name: "Record phone calls",
status: "to-do",
},
];
Roadmap.getLayout = (page) => <Layout title="(Rough) Roadmap">{page}</Layout>;
Roadmap.suppressFirstRenderFlicker = true;
export default Roadmap;