header style.. beginning of design language

app/components/IndexWorldCard.tsx

@@ -0,0 +1,22 @@
+import { HiChevronRight } from "react-icons/hi2";
+import { World } from "~/utils/saerro";
+import { CardBase, CardHeader } from "./Card";
+import { FactionBar } from "./FactionBar";
+
+export 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>
+  );
+};

app/globalStyles.ts

@@ -7,6 +7,6 @@ export const Body = styled("body", {
   backgroundAttachment: "fixed",
   color: "#fff",
   lineHeight: 1.6,
-  fontFamily: "Inter, system-ui, sans-serif",
+  fontFamily: "'IBM Plex Mono', monospace",
   margin: 0,
 });

app/root.tsx

@@ -21,7 +21,7 @@ export const meta: MetaFunction = () => ({
 export const links: LinksFunction = () => [
   {
     rel: "stylesheet",
-    href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap",
+    href: "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;700&display=swap",
   },
 ];
 

app/routes/index.tsx

@@ -5,37 +5,106 @@ import { indexQuery } from "~/utils/saerro";
 import { useLoaderData } from "@remix-run/react";
 import { json } from "@remix-run/cloudflare";
 import { FactionBar } from "~/components/FactionBar";
+import { WorldCard } from "~/components/IndexWorldCard";
+import { styled } from "styletron-react";
+import React, { ReactNode } from "react";
 
 export const loader = async () => {
   return json(await indexQuery());
 };
 
 export default function Index() {
-  const { allWorlds } = useLoaderData<typeof loader>();
+  // const { allWorlds } = useLoaderData<typeof loader>();
 
   return (
     <div>
-      {allWorlds.map((world) => (
+      <Header />
+      {/* {allWorlds.map((world) => (
         <WorldCard key={world.id} world={world} />
-      ))}
+      ))} */}
     </div>
   );
 }
 
-const WorldCard = ({ world }: { world: World }) => {
+const HeaderBase = styled("div", {
-  return (
+  display: "flex",
-    <CardBase>
+  flexDirection: "row",
-      <CardHeader to={`/worlds/${world.id}`}>
+  borderColor: "#fff",
-        <div>{world.name}</div>
+  backgroundColor: "#fff",
-        <HiChevronRight />
+  color: "#fff",
-      </CardHeader>
+  borderLeftWidth: "0.5rem",
+  borderTopWidth: "0.5rem",
+  borderRightWidth: "0",
+  borderBottomWidth: "0.5rem",
+  borderStyle: "solid",
+  borderTopLeftRadius: "0.5rem",
+  position: "relative",
+});
 
-      <div>
+const Header = () => (
-        <div>Population: {world.population.total.toLocaleString()}</div>
+  <HeaderBase>
-        <div>
+    <QuoteUnquoteLogo>
-          <FactionBar {...world.population} />
+      <b>PS2.LIVE</b>
-        </div>
+      <br />
-      </div>
+      Realtime tools for PlanetSide 2
-    </CardBase>
+    </QuoteUnquoteLogo>
+    <TheList>
+      <ListLink href="https://saerro.ps2.live" color="gold">
+        Saerro Live Pop API
+      </ListLink>
+      <ListLink href="https://try.ps2.live" color="#3333ff">
+        Census API Playground
+      </ListLink>
+      <ListLink href="https://agg.ps2.live/population" color="limegreen">
+        Population API
+      </ListLink>
+      <ListLink href="https://agg.ps2.live/continents" color="#44aadd">
+        Continents API
+      </ListLink>
+      <ListLink href="https://discord.ps2.live" color="#aa77dd">
+        Discord Character Link
+      </ListLink>
+      <ListLink href="https://metagame.ps2.live" color="#ff3333">
+        Metagame Webhooks
+      </ListLink>
+    </TheList>
+  </HeaderBase>
 );
-};
+
+const QuoteUnquoteLogo = styled("div", {
+  width: "8rem",
+  backgroundColor: "#fff",
+  color: "#000",
+  textAlign: "right",
+  padding: "0.5rem",
+  borderRight: "0.5rem solid #fff",
+});
+
+const TheList = styled("div", {
+  backgroundColor: "#000",
+  borderRadius: "0.5rem",
+  position: "relative",
+  left: "-0.5rem",
+  display: "flex",
+  flexWrap: "wrap",
+  padding: "0.5rem",
+  gap: "0.5rem",
+  flexDirection: "column",
+  maxHeight: "8rem",
+  alignContent: "flex-start",
+  justifyContent: "center",
+  flex: 1,
+});
+
+const ListLink = styled("a", ({ color }: { color: string }) => ({
+  display: "block",
+  padding: "0.5rem",
+  color,
+  textDecoration: "none",
+  borderRadius: "0.4rem",
+  transition: "all 0.2s ease-in-out",
+  ":hover": {
+    backgroundColor: color,
+    color: "#000",
+  },
+}));