72 lines
3.2 KiB
TypeScript
72 lines
3.2 KiB
TypeScript
import { requestScopedT as i18nT } from "~/locale/request-scoped-t";
|
|
import { Link } from "react-router";
|
|
|
|
interface Props {
|
|
items: { name: string; title: string; type?: ModelPropertyType; customType?: { name: string; route?: string }; description?: string; required: boolean }[];
|
|
}
|
|
export enum ModelPropertyType {
|
|
String,
|
|
DateTime,
|
|
Int,
|
|
Decimal,
|
|
Boolean,
|
|
UUID,
|
|
Cuid,
|
|
}
|
|
|
|
export default function DocPropertiesTable({ items }: Props) {
|
|
return (
|
|
<div className="not-prose flex flex-col">
|
|
<div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
|
<div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
|
|
<div className="overflow-hidden shadow-xs ring-1 ring-black ring-opacity-5 md:rounded-lg">
|
|
<table className="min-w-full divide-y divide-gray-300">
|
|
<thead className="bg-surface-neutral-secondary">
|
|
<tr>
|
|
<th scope="col" className="text-text-neutral-primary px-2 py-1.5 text-left text-sm font-semibold sm:pl-6">
|
|
{i18nT("components.docs.properties.name")}
|
|
</th>
|
|
<th scope="col" className="text-text-neutral-primary px-2 py-1.5 text-left text-sm font-semibold">
|
|
{i18nT("components.docs.properties.title")}
|
|
</th>
|
|
<th scope="col" className="text-text-neutral-primary px-2 py-1.5 text-left text-sm font-semibold">
|
|
{i18nT("components.docs.properties.type")}
|
|
</th>
|
|
<th scope="col" className="text-text-neutral-primary w-full px-2 py-1.5 text-left text-sm font-semibold">
|
|
{i18nT("components.docs.properties.description")}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-border bg-surface-neutral-primary divide-y">
|
|
{items.map((item) => (
|
|
<tr key={item.name}>
|
|
<td className="text-text-neutral-primary whitespace-nowrap px-2 py-1.5 text-sm font-medium sm:pl-6">
|
|
{item.name} {item.required && <span className="ml-1 text-red-500">*</span>}
|
|
</td>
|
|
<td className="text-text-neutral-tertiary whitespace-nowrap px-2 py-1.5 text-sm">{item.title}</td>
|
|
<td className="text-text-neutral-tertiary whitespace-nowrap px-2 py-1.5 text-sm">
|
|
{item.customType && (
|
|
<span className="font-bold">
|
|
{item.customType.route ? (
|
|
<Link className="text-theme-600 underline" to={item.customType.route}>
|
|
{item.customType.name}
|
|
</Link>
|
|
) : (
|
|
item.customType.name
|
|
)}
|
|
</span>
|
|
)}
|
|
{item.type !== undefined && ModelPropertyType[item.type]}
|
|
</td>
|
|
<td className="text-text-neutral-tertiary whitespace-nowrap px-2 py-1.5 text-sm">{item.description}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|