more docks mockuping

packages/website/app/routes/api/$name.tsx

@@ -1,21 +1,21 @@
 import type { LoaderFunction } from "remix"
 import { useLoaderData } from "remix"
-import { inspect } from "node:util"
-import { loadApiData } from "~/modules/api/api-data.server"
+import { getApiData } from "~/modules/api/api-data.server"
 import { renderMarkdown } from "~/modules/markdown/render-markdown.server"
+import { docsProseClass } from "~/modules/ui/components"
 
 type LoaderData = {
   title: string
   description?: { __html: string }
+  [key: string]: unknown
 }
 
 export const loader: LoaderFunction = async ({ params }) => {
-  const apiData = await loadApiData()
+  const apiData = getApiData()
 
   const entityName = params.name!
 
   const info = apiData.children?.find((child) => child.name === entityName)
-  console.log(inspect(info, { depth: Number.POSITIVE_INFINITY }))
 
   const description = [
     info?.comment?.shortText,
@@ -29,6 +29,11 @@ export const loader: LoaderFunction = async ({ params }) => {
   const data: LoaderData = {
     title: entityName,
     description: description ? await renderMarkdown(description) : undefined,
+    sig: await renderMarkdown(`
+\`\`\`tsx
+function ActionRow(props: ActionRowProps): ReactElement
+\`\`\`
+`),
   }
   return data
 }
@@ -38,14 +43,50 @@ export default function ApiDetailPage() {
 
   return (
     <>
-      <h1>{data.title}</h1>
-      {data.description ? (
-        <section dangerouslySetInnerHTML={data.description} />
-      ) : undefined}
+      <h1 className="text-3xl font-light">{data.title}</h1>
+      <p className="text-sm font-bold opacity-50 uppercase mt-1">Component</p>
+      <section
+        className={docsProseClass}
+        dangerouslySetInnerHTML={data.description}
+      />
+      <section className={docsProseClass}>
+        <ul>
+          <li>
+            <p>
+              <code>children?: ReactNode</code>
+            </p>
+            <p>
+              This should be a list of <code>{`<Option />`}</code> components.
+            </p>
+            <ul>
+              <li>
+                <p>
+                  <code>disabled?: boolean</code>
+                </p>
+                <p>
+                  When true, the select will be slightly faded, and cannot be
+                  interacted with.
+                </p>
+              </li>
+            </ul>
+          </li>
+          <li>
+            <p>
+              <code>minValues?: number</code>
+            </p>
+            <p>
+              With <code>multiple</code>, the minimum number of values that can
+              be selected. When <code>multiple</code> is false or not defined,
+              this is always 1.
+            </p>
+            <p>
+              This only limits the number of values that can be received by the
+              user. This does not limit the number of values that can be
+              displayed by you.
+            </p>
+          </li>
+        </ul>
+      </section>
     </>
   )
 }
-
-function addDefined<Value extends number | string>(
-  ...values: Array<Value | undefined>
-): Value | undefined {}