refactor(web/menu): list menu component split

web/src/features/menu/list/Header.tsx

@@ -0,0 +1,13 @@
+import { Box, Text } from "@chakra-ui/react";
+
+const Header: React.FC<{ title: string }> = ({ title }) => {
+  return (
+    <Box p={3} textAlign="center" borderTopLeftRadius="md" borderTopRightRadius="md" bg="#25262B">
+      <Text fontSize={24} textTransform="uppercase" fontWeight={300} fontFamily="Poppins">
+        {title}
+      </Text>
+    </Box>
+  );
+};
+
+export default Header;

web/src/features/menu/list/ListItem.tsx

@@ -0,0 +1,50 @@
+import { Box, Flex, Stack, Spacer, Text } from "@chakra-ui/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { forwardRef } from "react";
+
+interface Item {
+  label: string;
+  value: string | string[];
+}
+
+interface Props {
+  item: Item;
+  index: number;
+}
+
+const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index }, ref) => {
+  return (
+    <Box
+      bg="#25262B"
+      borderRadius="md"
+      tabIndex={index}
+      pointerEvents="none"
+      p={2}
+      height="60px"
+      key={`item-${index}`}
+      _focus={{ bg: "#373A40", outline: "none" }}
+      ref={(element) => {
+        if (ref)
+          // @ts-ignore i cba
+          return (ref.current = [...ref.current, element]);
+      }}
+    >
+      {Array.isArray(item.value) ? (
+        <Flex justifyContent="center" alignItems="center">
+          <Stack spacing={1}>
+            <Text color="#909296" textTransform="uppercase" fontSize={12} verticalAlign="middle">
+              {item.label}
+            </Text>
+            <Text>Nice cool</Text>
+          </Stack>
+          <Spacer />
+          <FontAwesomeIcon icon="arrows-left-right" fontSize={20} color="#909296" />
+        </Flex>
+      ) : (
+        item.label
+      )}
+    </Box>
+  );
+});
+
+export default ListItem;

web/src/features/menu/list/index.tsx

@@ -1,8 +1,9 @@
-import { Box, Spacer, Flex, Stack, Text } from "@chakra-ui/react";
+import { Box, Stack } from "@chakra-ui/react";
 import { useEffect, useRef, useState } from "react";
 import { useNuiEvent } from "../../../hooks/useNuiEvent";
 import { debugData } from "../../../utils/debugData";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import ListItem from "./ListItem";
+import Header from "./Header";
 
 interface MenuSettings {
   position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
@@ -46,20 +47,22 @@ const ListMenu: React.FC = () => {
       case "ArrowDown":
         setSelected((selected) => {
           if (selected >= menu.items.length - 1) return selected;
-          listRefs.current[selected + 1]?.focus();
           return selected + 1;
         });
         break;
       case "ArrowUp":
         setSelected((selected) => {
           if (selected <= 0) return selected;
-          listRefs.current[selected - 1]?.focus();
           return selected - 1;
         });
         break;
     }
   };
 
+  useEffect(() => {
+    listRefs.current[selected]?.focus();
+  }, [selected]);
+
   useEffect(() => {
     if (!visible) return document.removeEventListener("keyup", moveMenu);
 
@@ -91,39 +94,10 @@ const ListMenu: React.FC = () => {
         left={menu.position === "bottom-left" ? 1 : undefined}
         bottom={menu.position === "bottom-left" || menu.position === "bottom-right" ? 1 : undefined}
       >
-        <Box p={3} textAlign="center" borderTopLeftRadius="md" borderTopRightRadius="md" bg="#25262B">
+        <Header title={menu.title} />
-          <Text fontSize={24} textTransform="uppercase" fontWeight={300} fontFamily="Poppins">
-            {menu.title}
-          </Text>
-        </Box>
         <Stack direction="column" p={2} overflowY="scroll">
           {menu.items.map((item, index) => (
-            <Box
+            <ListItem index={index} item={item} ref={listRefs} key={`menu-item-${index}`} />
-              bg="#25262B"
-              borderRadius="md"
-              tabIndex={index}
-              pointerEvents="none"
-              p={2}
-              height="60px"
-              key={`item-${index}`}
-              _focus={{ bg: "#373A40", outline: "none" }}
-              ref={(element) => (listRefs.current = [...listRefs.current, element])}
-            >
-              {Array.isArray(item.value) ? (
-                <Flex justifyContent="center" alignItems="center">
-                  <Stack spacing={1}>
-                    <Text color="#909296" textTransform="uppercase" fontSize={12} verticalAlign="middle">
-                      {item.label}
-                    </Text>
-                    <Text>Nice cool</Text>
-                  </Stack>
-                  <Spacer />
-                  <FontAwesomeIcon icon="arrows-left-right" fontSize={20} color="#909296" />
-                </Flex>
-              ) : (
-                item.label
-              )}
-            </Box>
           ))}
         </Stack>
       </Box>