110 lines
2.8 KiB
TypeScript
110 lines
2.8 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";
|
|
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>();
|
|
|
|
return (
|
|
<div>
|
|
<Header />
|
|
{/* {allWorlds.map((world) => (
|
|
<WorldCard key={world.id} world={world} />
|
|
))} */}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const HeaderBase = styled("div", {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
borderColor: "#fff",
|
|
backgroundColor: "#fff",
|
|
color: "#fff",
|
|
borderLeftWidth: "0.5rem",
|
|
borderTopWidth: "0.5rem",
|
|
borderRightWidth: "0",
|
|
borderBottomWidth: "0.5rem",
|
|
borderStyle: "solid",
|
|
borderTopLeftRadius: "0.5rem",
|
|
position: "relative",
|
|
});
|
|
|
|
const Header = () => (
|
|
<HeaderBase>
|
|
<QuoteUnquoteLogo>
|
|
<b>PS2.LIVE</b>
|
|
<br />
|
|
Realtime tools for PlanetSide 2
|
|
</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",
|
|
},
|
|
}));
|