41 lines
1 KiB
TypeScript
41 lines
1 KiB
TypeScript
import { CardBase, CardHeader } from "~/components/Card";
|
|
import { HiChevronRight } from "react-icons/hi2";
|
|
import type { IndexResponse, World } from "~/utils/saerro";
|
|
import { indexQuery } from "~/utils/saerro";
|
|
import { useLoaderData } from "@remix-run/react";
|
|
import { json } from "@remix-run/cloudflare";
|
|
import { FactionBar } from "~/components/FactionBar";
|
|
|
|
export const loader = async () => {
|
|
return json(await indexQuery());
|
|
};
|
|
|
|
export default function Index() {
|
|
const { allWorlds } = useLoaderData<typeof loader>();
|
|
|
|
return (
|
|
<div>
|
|
{allWorlds.map((world) => (
|
|
<WorldCard key={world.id} world={world} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const WorldCard = ({ world }: { world: World }) => {
|
|
return (
|
|
<CardBase>
|
|
<CardHeader to={`/worlds/${world.id}`}>
|
|
<div>{world.name}</div>
|
|
<HiChevronRight />
|
|
</CardHeader>
|
|
|
|
<div>
|
|
<div>Population: {world.population.total.toLocaleString()}</div>
|
|
<div>
|
|
<FactionBar {...world.population} />
|
|
</div>
|
|
</div>
|
|
</CardBase>
|
|
);
|
|
};
|