initial index

app/routes/_index.tsx

@@ -1,7 +1,7 @@
 import { json, type V2_MetaFunction } from "@remix-run/cloudflare";
 import { useLoaderData } from "@remix-run/react";
 import { IndexWorld } from "~/components/index-world";
-import type { IndexResponse } from "~/utils/saerro";
+import { WorldContainer } from "~/components/index-world-container";
 import { indexQuery } from "~/utils/saerro";
 
 export const loader = async () => {
@@ -9,18 +9,22 @@ export const loader = async () => {
 };
 
 export const meta: V2_MetaFunction = () => {
-  return [{ title: "PS2.LIVE" }];
+  return [
+    { title: "PS2.LIVE" },
+    {
+      name: "description",
+      content: "PlanetSide 2 Live Population Stats",
+    },
+  ];
 };
 
 export default function Index() {
   const data = useLoaderData<typeof loader>();
   return (
-    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
+    <div>
       <h1>PS2.LIVE</h1>
       <h2>Worlds</h2>
-      {data.allWorlds.map((world) => (
-        <IndexWorld key={world.id} world={world} />
-      ))}
+      <WorldContainer worlds={data.allWorlds} health={data.health} />
     </div>
   );
 }