40 lines
874 B
TypeScript
40 lines
874 B
TypeScript
import { useLoaderData } from "react-router";
|
|
|
|
type Category = {
|
|
name: string;
|
|
group: { name: string } | undefined;
|
|
};
|
|
|
|
export async function loader(): Promise<Category[]> {
|
|
return [
|
|
{ name: "Books", group: { name: "Media" } },
|
|
{ name: "Movies", group: { name: "Media" } },
|
|
{ name: "Groceries", group: { name: "Shopping" } },
|
|
{ name: "Electronics", group: { name: "Shopping" } },
|
|
{ name: "Misc", group: undefined }
|
|
];
|
|
}
|
|
|
|
export default function Categories() {
|
|
const data = useLoaderData<typeof loader>();
|
|
|
|
return (
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">name</th>
|
|
<th scope="col">group</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data.map((t) => (
|
|
<tr>
|
|
<td>{t.name}</td>
|
|
<td>{t.group?.name}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
);
|
|
}
|