Implement Availability custom markdown component (#117)

fern-api · Sep 13, 2023 · 80c9bd5 · 80c9bd5 · vercel · Sep 13, 2023
1 parent afdb9fb
commit 80c9bd5
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/packages/ui/app/src/mdx/MdxContent.tsx b/packages/ui/app/src/mdx/MdxContent.tsx
@@ -22,6 +22,7 @@ import {
     Tr,
     Ul,
 } from "./base-components";
+import { Availability } from "./components/Availability";
 import { Callout } from "./components/Callout";
 import { Card } from "./components/Card";
 import { Cards } from "./components/Cards";
@@ -56,6 +57,7 @@ const COMPONENTS: MDXRemoteProps["components"] = {
     li: Li,
     a: A,
     strong: Strong,
+    Availability,
     Cards,
     Card,
     CodeBlock,

diff --git a/packages/ui/app/src/mdx/components/Availability.tsx b/packages/ui/app/src/mdx/components/Availability.tsx
@@ -0,0 +1,26 @@
+import type * as FernRegistryApiRead from "@fern-fern/registry-browser/api/resources/api/resources/v1/resources/read";
+import { EndpointAvailabilityTag } from "../../api-page/endpoints/EndpointAvailabilityTag";
+
+export declare namespace Availability {
+    export interface Props {
+        type: string;
+    }
+}
+
+function parseAvailability(type: unknown): FernRegistryApiRead.Availability {
+    if (typeof type !== "string") {
+        return "GenerallyAvailable";
+    } else if (type === "GenerallyAvailable" || type.toLowerCase() === "ga") {
+        return "GenerallyAvailable";
+    } else if (type.toLowerCase() === "beta") {
+        return "Beta";
+    } else if (type.toLowerCase() === "deprecated") {
+        return "Deprecated";
+    } else {
+        return "GenerallyAvailable";
+    }
+}
+
+export const Availability: React.FC<Availability.Props> = ({ type }) => {
+    return <EndpointAvailabilityTag availability={parseAvailability(type)} />;
+};