feat(nui): Text UI

web/src/components/App.tsx

@@ -1,6 +1,7 @@
 import Notifications from "./Notifications";
 import CircleProgressbar from "./CircleProgressbar";
 import Progressbar from "./Progressbar";
+import TextUI from "./TextUI";
 
 const App: React.FC = () => {
   return (
@@ -8,6 +9,7 @@ const App: React.FC = () => {
       <Progressbar />
       <CircleProgressbar />
       <Notifications />
+      <TextUI />
     </>
   );
 };

web/src/components/TextUI.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { useNuiEvent } from "../hooks/useNuiEvent";
+import { Box, Flex, ScaleFade, Text } from "@chakra-ui/react";
+import { debugData } from "../utils/debugData";
+
+interface Props {
+  text: string;
+  position?: "right-center" | "left-center" | "top-center";
+  style?: React.CSSProperties;
+}
+
+debugData([
+  {
+    action: "textUi",
+    data: {
+      text: "[E] - Access locker inventory",
+      position: "right-center",
+    },
+  },
+]);
+
+const TextUI: React.FC = () => {
+  const [data, setData] = React.useState<Props>({
+    text: "",
+    position: "right-center",
+  });
+  const [visible, setVisible] = React.useState(false);
+
+  useNuiEvent<Props>("textUi", (data) => {
+    setData(data);
+    setVisible(true);
+  });
+
+  useNuiEvent("textUiHide", () => setVisible(false));
+
+  return (
+    <Flex
+      w="100%"
+      h="100%"
+      p={3}
+      alignItems={data.position === "top-center" ? "baseline" : "center"}
+      justifyContent={
+        data.position === "right-center"
+          ? "flex-end"
+          : data.position === "left-center"
+          ? "flex-start"
+          : "center"
+      }
+    >
+      <ScaleFade in={visible} unmountOnExit>
+        <Box bg="blue.400" p={3} fontFamily="Poppins" style={data.style}>
+          <Text>{data.text}</Text>
+        </Box>
+      </ScaleFade>
+    </Flex>
+  );
+};
+
+export default TextUI;

web/src/index.css

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap");
+
 body {
   background: none !important;
   margin: 0;
@@ -7,6 +9,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   height: 100vh;
+  user-select: none;
 }
 
 #root {