93 lines
2.5 KiB
TypeScript
93 lines
2.5 KiB
TypeScript
import type { LoaderFunction } from "remix"
|
|
import { useLoaderData } from "remix"
|
|
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 = getApiData()
|
|
|
|
const entityName = params.name!
|
|
|
|
const info = apiData.children?.find((child) => child.name === entityName)
|
|
|
|
const description = [
|
|
info?.comment?.shortText,
|
|
info?.comment?.text,
|
|
info?.signatures?.[0]?.comment?.shortText,
|
|
info?.signatures?.[0]?.comment?.text,
|
|
]
|
|
.filter(Boolean)
|
|
.join("\n\n")
|
|
|
|
const data: LoaderData = {
|
|
title: entityName,
|
|
description: description ? await renderMarkdown(description) : undefined,
|
|
sig: await renderMarkdown(`
|
|
\`\`\`tsx
|
|
function ActionRow(props: ActionRowProps): ReactElement
|
|
\`\`\`
|
|
`),
|
|
}
|
|
return data
|
|
}
|
|
|
|
export default function ApiDetailPage() {
|
|
const data = useLoaderData<LoaderData>()
|
|
|
|
return (
|
|
<>
|
|
<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>
|
|
</>
|
|
)
|
|
}
|