docs: support showing version of API route in API reference (#12433)

* docs: support showing version of API route in API reference

* small design fix

www/apps/api-reference/components/Tags/Operation/DescriptionSection/Events/index.tsx

@@ -92,8 +92,8 @@ const TagsOperationDescriptionSectionEvent = ({
     useCopy(snippet)
   return (
     <TabsContent value={event.name}>
-      <div className="my-1 flex flex-wrap justify-between items-center mb-1">
-        <div className="flex flex-wrap items-center gap-0.5">
+      <div className="my-1 flex flex-wrap justify-between items-start mb-1">
+        <div className="flex flex-wrap items-center gap-0.5 flex-1">
           <MarkdownContent
             allowedElements={["code", "p", "a"]}
             className={"[&_p:last-child]:!mb-0"}

www/apps/api-reference/components/Tags/Operation/DescriptionSection/index.tsx

@@ -8,7 +8,7 @@ import dynamic from "next/dynamic"
 import TagsOperationDescriptionSectionParameters from "./Parameters"
 import MDXContentClient from "@/components/MDXContent/Client"
 import { useArea } from "../../../../providers/area"
-import { Feedback, Badge, Link, FeatureFlagNotice, H2 } from "docs-ui"
+import { Feedback, Badge, Link, FeatureFlagNotice, H2, Tooltip } from "docs-ui"
 import { usePathname } from "next/navigation"
 import { TagsOperationDescriptionSectionWorkflowBadgeProps } from "./WorkflowBadge"
 import { TagsOperationDescriptionSectionEventsProps } from "./Events"
@@ -63,6 +63,15 @@ const TagsOperationDescriptionSection = ({
             badgeClassName="ml-0.5"
           />
         )}
+        {operation["x-version"] && (
+          <Tooltip
+            text={`This API route is available since v${operation["x-version"]}`}
+          >
+            <Badge variant="blue" className="ml-0.5">
+              v{operation["x-version"]}
+            </Badge>
+          </Tooltip>
+        )}
       </H2>
       <div className="my-1">
         <MDXContentClient content={operation.description} />