feat(nui): Add markdown support to text ui

Also changed the font to be a monospaced font, avoids weird alignment issues

web/src/components/TextUI.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { useNuiEvent } from "../hooks/useNuiEvent";
 import { Box, Flex, ScaleFade, Text } from "@chakra-ui/react";
 import { debugData } from "../utils/debugData";
+import ReactMarkdown from "react-markdown";
 
 interface Props {
   text: string;
@@ -13,7 +14,7 @@ debugData([
   {
     action: "textUi",
     data: {
-      text: "[E] - Access locker inventory",
+      text: "[E] - Access locker inventory \n [G] - Do something else  \n ",
       position: "right-center",
     },
   },
@@ -53,11 +54,14 @@ const TextUI: React.FC = () => {
           bg="gray.700"
           boxShadow="lg"
           p={3}
-          fontFamily="Poppins"
+          fontFamily="DM Mono"
           style={data.style}
           borderRadius="md"
+          maxW="xs"
         >
-          <Text>{data.text}</Text>
+          <Text>
+            <ReactMarkdown>{data.text}</ReactMarkdown>
+          </Text>
         </Box>
       </ScaleFade>
     </Flex>

web/src/index.css

@@ -1,6 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;700&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");
 
 body {
   background: none !important;