Add ET members page

app/routes/et-members.tsx

@@ -0,0 +1,74 @@
+import { useLoaderData } from "@remix-run/react";
+import {
+  Container,
+  Heading,
+  Link,
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from "@chakra-ui/react";
+
+export async function loader({ context }: { context: RequestContext }) {
+  const etData = await context.env.D1.prepare(
+    "SELECT * FROM et_members;",
+  ).all();
+
+  if (etData.error)
+    throw new Response(null, {
+      status: 500,
+    });
+
+  return etData.results as { [k: string]: any }[];
+}
+
+export default function () {
+  async function removeMember(id: string) {
+    await fetch("/api/events-team/team-members/user", {
+      body: JSON.stringify({ id }),
+      headers: {
+        "content-type": "application/json",
+      },
+      method: "DELETE",
+    });
+
+    location.reload();
+  }
+
+  const memberData = useLoaderData<typeof loader>();
+
+  return (
+    <Container maxW="container.lg">
+      <Heading>Events Team Members</Heading>
+      <TableContainer pt="16px">
+        <Table variant="simple">
+          <Thead>
+            <Tr>
+              <Th>Discord ID</Th>
+              <Th>Name</Th>
+              <Th>Roblox ID</Th>
+              <Th>Remove</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {memberData.map((member) => (
+              <Tr>
+                <Td>{member.id}</Td>
+                <Td>{member.name}</Td>
+                <Td>{member.roblox_id}</Td>
+                <Td>
+                  <Link onClick={async () => removeMember(member.id)}>
+                    Remove
+                  </Link>
+                </Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </TableContainer>
+    </Container>
+  );
+}