67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
import React from "react";
|
|
|
|
import customJsxComponentRegistry from "../generated/custom-jsx-components.json";
|
|
|
|
const enabledComponents = customJsxComponentRegistry.filter((component) => component.safety !== "denied");
|
|
const deniedComponents = customJsxComponentRegistry.filter((component) => component.safety === "denied");
|
|
const categories = [...new Set(enabledComponents.map((component) => component.category))];
|
|
|
|
export function CustomJsxComponentReference() {
|
|
return (
|
|
<>
|
|
<h3>Enabled and wrapped components</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Category</th>
|
|
<th>Components</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{categories.map((category) => (
|
|
<tr key={category}>
|
|
<td>
|
|
<code>{category}</code>
|
|
</td>
|
|
<td>
|
|
{enabledComponents
|
|
.filter((component) => component.category === category)
|
|
.map((component) => (
|
|
<span key={component.name} style={{ display: "inline-block", margin: "0 0.5rem 0.35rem 0" }}>
|
|
<a href={component.documentationUrl}>
|
|
<code>{component.name}</code>
|
|
</a>
|
|
{component.safety === "wrapped" && <small> (wrapped)</small>}
|
|
</span>
|
|
))}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3>Denied components</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Component</th>
|
|
<th>Reason</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{deniedComponents.map((component) => (
|
|
<tr key={component.name}>
|
|
<td>
|
|
<a href={component.documentationUrl} aria-label={component.name}>
|
|
<code>{component.name}</code>
|
|
</a>
|
|
</td>
|
|
<td>{component.reason}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</>
|
|
);
|
|
}
|