feat: cleaner api rendering

packages/website-ue/src/components/ApiGroup.astro

@@ -0,0 +1,34 @@
+---
+import type { CollectionEntry } from "astro:content";
+import { Code } from "./Code";
+import { Heading } from "./Heading";
+import { MarkdownCustom } from "./MarkdownCustom";
+
+interface Props {
+  apis: CollectionEntry<"api">[];
+}
+
+const { apis } = Astro.props;
+---
+
+<style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+</style>
+
+{
+  apis
+    .sort((a, b) => a.id.localeCompare(b.id))
+    .map((api) => (
+      <div class="container">
+        <Heading size="3">
+          <Code>{api.id}</Code>
+        </Heading>
+
+        <MarkdownCustom body={api.data.docs ?? ""} />
+      </div>
+    ))
+}

packages/website-ue/src/components/MarkdownCustom/index.module.css

@@ -0,0 +1,5 @@
+.markdown {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}

packages/website-ue/src/components/MarkdownCustom/index.tsx

@@ -0,0 +1,21 @@
+import Markdown from "react-markdown";
+import { Text } from "../Text";
+import styles from "./index.module.css";
+
+interface Props {
+  body: string;
+}
+
+export function MarkdownCustom({ body }: Props) {
+  return (
+    <div className={styles.markdown}>
+      <Markdown
+        components={{
+          p: Text,
+        }}
+      >
+        {body}
+      </Markdown>
+    </div>
+  );
+}

packages/website-ue/src/components/Section/index.module.css

@@ -9,7 +9,7 @@
 
     display: flex;
     flex-direction: column;
-    gap: var(--space-4);
+    gap: var(--space-5);
   }
 
   &[data-first="true"] .content {