Actually make infraction modal trigger work

app/routes/mod-queue.tsx

@@ -12,12 +12,14 @@ import {
   PopoverTrigger,
   Select,
   useBreakpointValue,
+  useDisclosure,
   useToast,
   VStack,
 } from "@chakra-ui/react";
 import { useState } from "react";
 import AppealCard from "../../components/AppealCard.js";
 import GameAppealCard from "../../components/GameAppealCard.js";
+import NewInfractionModal from "../../components/NewInfractionModal.js";
 import ReportCard from "../../components/ReportCard.js";
 import { useLoaderData } from "@remix-run/react";
 
@@ -87,6 +89,7 @@ export function meta() {
 
 export default function () {
   const pageProps = useLoaderData<typeof loader>();
+  const infractionModalDisclosure = useDisclosure();
   const isDesktop = useBreakpointValue({ base: false, lg: true });
   const entryTypes = [];
   const [entries, setEntries] = useState([] as JSX.Element[]);
@@ -148,8 +151,27 @@ export default function () {
     setBefore(entryData[entryData.length - 1].created_at);
   }
 
+  const itemModals: {
+    [k: string]: {
+      isOpen: boolean;
+      onOpen: () => void;
+      onClose: () => void;
+      [k: string]: any;
+    };
+  } = {
+    game_ban: useDisclosure(),
+    inactivity: useDisclosure(),
+    infraction: infractionModalDisclosure,
+  };
+
+  console.log();
+
   return (
     <Container maxW="container.lg">
+      <NewInfractionModal
+        isOpen={infractionModalDisclosure.isOpen}
+        onClose={infractionModalDisclosure.onClose}
+      />
       <Flex>
         <VStack w={isDesktop ? "container.md" : "container.lg"}>
           {entries}
@@ -158,13 +180,13 @@ export default function () {
           <Select>{entryTypes}</Select>
         </Box>
       </Flex>
-      <Popover>
+      <Popover placement="top">
         <PopoverTrigger>
           <Button borderRadius="50%" h="16" w="16">
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              width="16"
+              width="32"
-              height="16"
+              height="32"
               fill="currentColor"
               viewBox="0 0 16 16"
             >
@@ -178,9 +200,15 @@ export default function () {
           <PopoverHeader>Create New</PopoverHeader>
           <PopoverBody>
             <VStack>
-              {pageProps.item_types.map((item) => {
+              {pageProps.item_types.map((item) => (
-                return <Button w="100%">{item.name}</Button>;
+                <Button
-              })}
+                  key={item.value}
+                  onClick={() => itemModals[item.value].onOpen()}
+                  w="100%"
+                >
+                  {item.name}
+                </Button>
+              ))}
             </VStack>
           </PopoverBody>
         </PopoverContent>