Move card types to declaration file

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 ReportCard from "../../components/ReportCard.js";
 import { useLoaderData } from "@remix-run/react";
 
 export async function loader({ context }: { context: RequestContext }) {
@@ -114,19 +115,12 @@ export default function () {
     for (const entry of entryData) {
       switch (queue_type) {
         case "appeal":
-          newEntries.push(
-            <AppealCard
-              {...(entry as {
-                ban_reason: string;
-                createdAt: number;
-                discriminator: string;
-                id: string;
-                learned: string;
-                reason_for_unban: string;
-                username: string;
-              })}
-            />
-          );
+          newEntries.push(<AppealCard {...(entry as AppealCardProps)} />);
+
+          break;
+
+        case "report":
+          newEntries.push(<ReportCard {...(entry as ReportCardProps)} />);
       }
     }
 

components/AppealCard.tsx

@@ -12,15 +12,7 @@ import {
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 
-export default function (props: {
-  ban_reason: string;
-  createdAt: number;
-  discriminator: string;
-  id: string;
-  learned: string;
-  reason_for_unban: string;
-  username: string;
-}) {
+export default function (props: AppealCardProps) {
   const [dateString, setDateString] = useState(
     new Date(props.createdAt).toUTCString()
   );

components/ReportCard.tsx

@@ -13,13 +13,7 @@ import {
 } from "@chakra-ui/react";
 import { useState } from "react";
 
-export default function (props: {
-  attachment: string;
-  attachment_loading?: boolean;
-  reporter?: { [k: string]: any };
-  target_ids: number[];
-  target_usernames: string[];
-}) {
+export default function (props: ReportCardProps) {
   const targetMap: { [k: number]: string } = {};
   const [attachmentReady, setAttachmentReady] = useState(
     !props.attachment_loading

index.d.ts

@@ -23,6 +23,24 @@ declare global {
     extractCriticalToChunks: (html: string) => EmotionCriticalToChunks;
   }
 
+  interface AppealCardProps {
+    ban_reason: string;
+    createdAt: number;
+    discriminator: string;
+    id: string;
+    learned: string;
+    reason_for_unban: string;
+    username: string;
+  }
+
+  interface ReportCardProps {
+    attachment: string;
+    attachment_loading?: boolean;
+    reporter?: { [k: string]: any };
+    target_ids: number[];
+    target_usernames: string[];
+  }
+
   export function createEmotionServer(cache: EmotionCache): EmotionServer;
 }