refactor(web/menu): planet menu data passing

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

@@ -1,6 +1,10 @@
-import { ActionIcon, Box, Tooltip } from '@mantine/core';
+import { ActionIcon, Box, Stack, Text, Transition } from '@mantine/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { useState } from 'react';
+import { useNuiEvent } from '../../../hooks/useNuiEvent';
+import { debugData } from '../../../utils/debugData';
+import { fetchNui } from '../../../utils/fetchNui';
 
 const radius = 60;
 
@@ -14,17 +18,45 @@ function getTransform(index: number, totalItems: number) {
   return `translate(${x}px, ${y}px)`;
 }
 
-const items: { icon: IconProp; label: string }[] = [
+interface MenuItem {
-  { icon: 'handcuffs', label: 'Arrest' },
+  icon: IconProp;
+  label: string;
+}
+
+debugData<{ items: MenuItem[]; sub?: boolean }>([
+  {
+    action: 'openPlanetMenu',
+    data: {
+      items: [
+        { icon: 'palette', label: 'Paint' },
         { icon: 'warehouse', label: 'Garage' },
-  { icon: 'heart', label: 'Info' },
         { icon: 'handcuffs', label: 'Arrest' },
-  { icon: 'warehouse', label: 'Garage' },
+      ],
-  { icon: 'heart', label: 'Info' },
+      sub: false,
-];
+    },
+  },
+]);
 
 const PlanetMenu: React.FC = () => {
+  const [visible, setVisible] = useState(false);
+  const [menu, setMenu] = useState<{ items: MenuItem[]; sub?: boolean }>({
+    items: [],
+    sub: false,
+  });
+  const [currentItem, setCurrentItem] = useState({ label: '', visible: false });
+
+  useNuiEvent('openPlanetMenu', (data: { items: MenuItem[]; sub?: boolean }) => {
+    setMenu(data);
+    setVisible(true);
+  });
+
+  const handleItemClick = (index: number) => {
+    // fetchNui('planetClick', index)
+    // setVisible(false);
+  };
+
   return (
+    <>
       <Box
         style={{
           position: 'absolute',
@@ -33,6 +65,9 @@ const PlanetMenu: React.FC = () => {
           transform: 'translate(-50%, -50%)',
         }}
       >
+        <>
+          {visible && (
+            <>
               <ActionIcon variant="filled" radius="xl" size="xl" color="primary" sx={{ zIndex: 99 }} w={50} h={50}>
                 <FontAwesomeIcon fixedWidth icon="xmark" size="lg" />
               </ActionIcon>
@@ -49,10 +84,13 @@ const PlanetMenu: React.FC = () => {
                   justifyContent: 'center',
                 }}
               >
-        {items.map((item, index) => (
+                {menu.items.map((item, index) => (
                   <Box
+                    onMouseEnter={() => setCurrentItem({ label: item.label, visible: true })}
+                    onMouseLeave={() => setCurrentItem((prevState) => ({ ...prevState, visible: false }))}
+                    onClick={() => handleItemClick(index)}
                     sx={(theme) => ({
-              transform: getTransform(index, items.length),
+                      transform: getTransform(index, menu.items.length),
                       position: 'absolute',
                       width: 40,
                       height: 40,
@@ -74,7 +112,37 @@ const PlanetMenu: React.FC = () => {
                   </Box>
                 ))}
               </Box>
+            </>
+          )}
+        </>
       </Box>
+      <Stack
+        sx={{ position: 'absolute', width: '100%', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}
+        mt={120}
+        justify="center"
+        align="center"
+      >
+        <Transition transition="fade" mounted={currentItem.visible}>
+          {(styles) => (
+            <Box
+              style={styles}
+              sx={(theme) => ({
+                backgroundColor: theme.colors.dark[6],
+                color: theme.colors.dark[2],
+                padding: 8,
+                borderRadius: theme.radius.sm,
+                fontWeight: 500,
+                fontSize: 14,
+                boxShadow: theme.shadows.sm,
+                textAlign: 'center',
+              })}
+            >
+              <Text>{currentItem.label}</Text>
+            </Box>
+          )}
+        </Transition>
+      </Stack>
+    </>
   );
 };