reset

app/components/Card.tsx

@@ -1,29 +0,0 @@
-import { Link } from "@remix-run/react";
-import { styled } from "styletron-react";
-
-export const CardBase = styled("div", {
-  display: "flex",
-  flexDirection: "column",
-  padding: "1rem",
-  backgroundColor: "#000",
-  border: "2px solid #fff",
-  borderRadius: "0.5rem",
-  margin: "1rem",
-});
-
-export const CardHeader = styled(Link, {
-  display: "flex",
-  flex: 1,
-  alignItems: "center",
-  justifyContent: "space-between",
-  backgroundColor: "#ccc",
-  borderRadius: "0.5rem",
-  fontSize: "1.25rem",
-  color: "#000",
-  textDecoration: "none",
-  padding: "0.5rem",
-  cursor: "pointer",
-  ":hover": {
-    backgroundColor: "#fff",
-  },
-});

app/components/FactionBar.tsx

@@ -1,55 +0,0 @@
-import { styled } from "styletron-react";
-
-const BarRoot = styled("div", {
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-  overflow: "hidden",
-  borderRadius: "0.5rem",
-  border: "1px solid #888",
-});
-
-const Bar = styled(
-  "div",
-  ({
-    color,
-    size,
-    borders = false,
-  }: {
-    color: string;
-    size: number;
-    borders?: boolean;
-  }) => ({
-    backgroundColor: color,
-    flex: size,
-    padding: "0 0.35rem",
-    textAlign: "center",
-    textShadow: "0 0 0.25rem #000",
-  })
-);
-
-export const FactionBar = ({
-  nc,
-  tr,
-  vs,
-  showNumbers = true,
-}: {
-  showNumbers?: boolean;
-  nc: number;
-  tr: number;
-  vs: number;
-}) => {
-  return (
-    <BarRoot>
-      <Bar size={nc} color="#22f" title="New Conglomerate">
-        {nc.toLocaleString()}
-      </Bar>
-      <Bar size={tr} color="#f11" title="Terran Republic">
-        {tr.toLocaleString()}
-      </Bar>
-      <Bar size={vs} color="#a0d" title="Vanu Sovreignty">
-        {vs.toLocaleString()}
-      </Bar>
-    </BarRoot>
-  );
-};

app/components/IndexWorldCard.tsx

@@ -1,22 +0,0 @@
-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>
-  );
-};