wehub-resource-sync
95 lines
2.7 KiB
Diff
95 lines
2.7 KiB
Diff
--- template/app/src/landing-page/components/Roadmap.tsx
|
|
+++ opensaas-sh/app/src/landing-page/components/Roadmap.tsx
|
|
@@ -0,0 +1,91 @@
|
|
+import { GithubEpicStatus } from "../operations";
|
|
+
|
|
+import { GitPullRequestArrow, Loader2 } from "lucide-react";
|
|
+import { Link } from "react-router";
|
|
+import { getGithubRoadmap, useQuery } from "wasp/client/operations";
|
|
+import { RoadmapStatusColumn } from "./RoadmapStatusColumn";
|
|
+
|
|
+export function Roadmap() {
|
|
+ const { data: epics, isLoading, error } = useQuery(getGithubRoadmap);
|
|
+
|
|
+ if (isLoading) {
|
|
+ return (
|
|
+ <RoadmapWrapper>
|
|
+ <div className="flex justify-center py-12">
|
|
+ <Loader2 className="h-8 w-8 animate-spin text-yellow-500" />
|
|
+ </div>
|
|
+ </RoadmapWrapper>
|
|
+ );
|
|
+ }
|
|
+
|
|
+ if (error) {
|
|
+ return (
|
|
+ <RoadmapWrapper>
|
|
+ <div className="py-12 text-center text-red-500">
|
|
+ Failed to load roadmap
|
|
+ </div>
|
|
+ </RoadmapWrapper>
|
|
+ );
|
|
+ }
|
|
+
|
|
+ if (!epics || epics.length === 0) {
|
|
+ return (
|
|
+ <RoadmapWrapper>
|
|
+ <div className="flex items-center justify-center gap-1 py-12 text-center text-gray-500 dark:text-gray-400">
|
|
+ <GitPullRequestArrow className="mr-1 h-5 w-5" />
|
|
+ <p>No roadmap items yet.</p>
|
|
+ <p>
|
|
+ Add your idea{" "}
|
|
+ <Link
|
|
+ to="https://github.com/wasp-lang/open-saas/issues/new"
|
|
+ target="_blank"
|
|
+ rel="noreferrer"
|
|
+ className="text-primary hover:text-primary/80 hover:underline"
|
|
+ >
|
|
+ here
|
|
+ </Link>
|
|
+ .
|
|
+ </p>
|
|
+ </div>
|
|
+ </RoadmapWrapper>
|
|
+ );
|
|
+ }
|
|
+
|
|
+ return (
|
|
+ <RoadmapWrapper>
|
|
+ <div className="grid gap-6 md:grid-cols-4">
|
|
+ {Object.values(GithubEpicStatus).map((status) => (
|
|
+ <RoadmapStatusColumn
|
|
+ key={status}
|
|
+ status={status}
|
|
+ epics={epics.filter((e) => e.status === status)}
|
|
+ />
|
|
+ ))}
|
|
+ </div>
|
|
+ </RoadmapWrapper>
|
|
+ );
|
|
+}
|
|
+
|
|
+function RoadmapWrapper({ children }: { children?: React.ReactNode }) {
|
|
+ return (
|
|
+ <div className="scroll-mt-24 py-12 md:py-20" id="roadmap">
|
|
+ <div className="mx-auto max-w-7xl px-6 lg:px-8">
|
|
+ <RoadmapHeader />
|
|
+ {children}
|
|
+ </div>
|
|
+ </div>
|
|
+ );
|
|
+}
|
|
+
|
|
+function RoadmapHeader() {
|
|
+ return (
|
|
+ <div className="mx-auto mb-12 max-w-2xl text-center">
|
|
+ <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-white">
|
|
+ The Roadmap
|
|
+ </h2>
|
|
+ <p className="mt-4 text-lg leading-8 text-gray-600 dark:text-gray-300">
|
|
+ High-level topics we are planning and working on.
|
|
+ </p>
|
|
+ </div>
|
|
+ );
|
|
+}
|