From b0a17bd2b367c2073532e6c39dbffa67e33dfe34 Mon Sep 17 00:00:00 2001
From: regalijan <r@regalijan.com>
Date: Thu, 19 Oct 2023 16:49:26 -0400
Subject: [PATCH] Create game appeal card

---
 app/routes/mod-queue.tsx      |  8 +++++++
 components/GameAppealCard.tsx | 43 +++++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 components/GameAppealCard.tsx

diff --git a/app/routes/mod-queue.tsx b/app/routes/mod-queue.tsx
index 9045f0c..0e75009 100644
--- a/app/routes/mod-queue.tsx
+++ b/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;
       }
     }
 
diff --git a/components/GameAppealCard.tsx b/components/GameAppealCard.tsx
new file mode 100644
index 0000000..f47665d
--- /dev/null
+++ b/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>
+  );
+}