61 lines
3.3 KiB
TypeScript
61 lines
3.3 KiB
TypeScript
import { t as i18nT } from "i18next";
|
|
import CheckIcon from "../icons/CheckIcon";
|
|
import XIcon from "../icons/XIcon";
|
|
|
|
interface Props {
|
|
items: { route: string; c: boolean; r: boolean; u: boolean; d: boolean }[];
|
|
}
|
|
|
|
export default function DocLifeCycle({ 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 w-full px-2 py-1.5 text-left text-sm font-semibold sm:pl-6">
|
|
{i18nT("components.docs.lifecycle.route")}
|
|
</th>
|
|
<th scope="col" className="text-text-neutral-primary px-2 py-1.5 text-center text-sm font-semibold">
|
|
{i18nT("components.docs.lifecycle.create")}
|
|
</th>
|
|
<th scope="col" className="text-text-neutral-primary px-2 py-1.5 text-center text-sm font-semibold">
|
|
{i18nT("components.docs.lifecycle.read")}
|
|
</th>
|
|
<th scope="col" className="text-text-neutral-primary px-2 py-1.5 text-center text-sm font-semibold">
|
|
{i18nT("components.docs.lifecycle.update")}
|
|
</th>
|
|
<th scope="col" className="text-text-neutral-primary px-2 py-1.5 text-center text-sm font-semibold">
|
|
{i18nT("components.docs.lifecycle.delete")}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-border bg-surface-neutral-primary divide-y">
|
|
{items.map((item) => (
|
|
<tr key={item.route}>
|
|
<td className="text-text-neutral-primary whitespace-nowrap px-2 py-1.5 text-sm font-medium sm:pl-6">{item.route}</td>
|
|
<td className="text-text-neutral-tertiary whitespace-nowrap px-2 py-1.5 text-center text-sm">
|
|
{item.c ? <CheckIcon className="text-theme-500 mx-auto h-4 w-4" /> : <XIcon className="mx-auto h-4 w-4 text-gray-300" />}
|
|
</td>
|
|
<td className="text-text-neutral-tertiary whitespace-nowrap px-2 py-1.5 text-center text-sm">
|
|
{item.r ? <CheckIcon className="text-theme-500 mx-auto h-4 w-4" /> : <XIcon className="mx-auto h-4 w-4 text-gray-300" />}
|
|
</td>
|
|
<td className="text-text-neutral-tertiary whitespace-nowrap px-2 py-1.5 text-center text-sm">
|
|
{item.u ? <CheckIcon className="text-theme-500 mx-auto h-4 w-4" /> : <XIcon className="mx-auto h-4 w-4 text-gray-300" />}
|
|
</td>
|
|
<td className="text-text-neutral-tertiary whitespace-nowrap px-2 py-1.5 text-center text-sm">
|
|
{item.d ? <CheckIcon className="text-theme-500 mx-auto h-4 w-4" /> : <XIcon className="mx-auto h-4 w-4 text-gray-300" />}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|