Create game appeal card

app/routes/mod-queue.tsx

@@ -9,6 +9,7 @@ import {
 } from "@chakra-ui/react";
 import { useState } from "react";
 import AppealCard from "../../components/AppealCard.js";
+import GameAppealCard from "../../components/GameAppealCard.js";
 import ReportCard from "../../components/ReportCard.js";
 import { useLoaderData } from "@remix-run/react";
 
@@ -119,8 +120,15 @@ export default function () {
 
           break;
 
+        case "gma":
+          newEntries.push(<GameAppealCard {...(entry as GameAppealProps)} />);
+
+          break;
+
         case "report":
           newEntries.push(<ReportCard {...(entry as ReportCardProps)} />);
+
+          break;
       }
     }
 

components/GameAppealCard.tsx

@@ -0,0 +1,43 @@
+import {
+  Box,
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Heading,
+  Stack,
+  StackDivider,
+  Text,
+} from "@chakra-ui/react";
+
+export default function (props: GameAppealProps) {
+  return (
+    <Card w="100%">
+      <CardHeader>
+        <Heading size="md">Game Ban Appeal for {props.roblox_username}</Heading>
+        <Text fontSize="xs">ID: {props.roblox_id}</Text>
+      </CardHeader>
+      <CardBody>
+        <Stack divider={<StackDivider />}>
+          <Box>
+            <Heading size="xs">Response: Explanation of Ban</Heading>
+            <Text>{props.whatHappened}</Text>
+          </Box>
+          <Box>
+            <Heading size="xs">Response: Reasoning for Unban</Heading>
+            <Text>{props.reasonForUnban}</Text>
+          </Box>
+        </Stack>
+      </CardBody>
+      <CardFooter pb="4px">
+        <Box>
+          <Button colorScheme="red">Deny</Button>
+          <Button colorScheme="blue" ml="8px">
+            Accept
+          </Button>
+        </Box>
+      </CardFooter>
+    </Card>
+  );
+}