feat(site): extract api reference from components (#464)

site/src/components/docs/api-reference/ApiDataAttrsTable.astro

@@ -0,0 +1,43 @@
+---
+/**
+ * Renders the data attributes table for API reference.
+ */
+import MarkdownCode from '@/components/typography/MarkdownCode.astro';
+import Table from '@/components/typography/Table.astro';
+import Tbody from '@/components/typography/Tbody.astro';
+import Td from '@/components/typography/Td.astro';
+import Th from '@/components/typography/Th.astro';
+import Thead from '@/components/typography/Thead.astro';
+import Tr from '@/components/typography/Tr.astro';
+import type { DataAttrDef } from '@/types/api-reference';
+import InlineMarkdown from './InlineMarkdown.astro';
+
+interface Props {
+  dataAttributes: Record<string, DataAttrDef>;
+}
+
+const { dataAttributes } = Astro.props;
+
+const attrs = Object.entries(dataAttributes);
+---
+
+<Table maxWidth={false} outerClass="my-6">
+    <Thead>
+        <Tr>
+            <Th>Attribute</Th>
+            <Th>Description</Th>
+        </Tr>
+    </Thead>
+    <Tbody>
+        {
+            attrs.map(([name, def]) => (
+                <Tr>
+                    <Td class="align-top">
+                        <MarkdownCode>{name}</MarkdownCode>
+                    </Td>
+                    <Td><InlineMarkdown content={def.description} /></Td>
+                </Tr>
+            ))
+        }
+    </Tbody>
+</Table>