thingtime_review/remix/app/components/Thingtime/SettingsMenu.tsx

import React, { useState } from "react"
import { Center, Flex, Text } from "@chakra-ui/react"

import { Icon } from "../Icon/Icon"

export const SettingsMenu = (props) => {
  const [show, setShow] = useState(false)

  const showMenu = React.useCallback(() => {
    setShow(true)
  }, [])

  const hideMenu = React.useCallback(() => {
    setShow(false)
  }, [])

  const basePadding = React.useMemo(() => {
    return 4
  }, [])

  const types = React.useMemo(() => {
    const ret = ["any", "object", "array", "string", "number", "boolean"]
    return ret
  }, [])

  const onChangeType = React.useCallback(
    (type) => {
      props?.onChangeType?.(type)
    },
    [props?.onChangeType]
  )

  const iconSize = 10

  return (
    <Center
      position="relative"
      opacity={props?.opacity}
      transition={props?.transition || "all 0.2s ease-in-out"}
      onMouseEnter={showMenu}
      onMouseLeave={hideMenu}
    >
      <Flex
        paddingLeft={1}
        // opacity={showContextIcon ? 1 : 0}
        cursor="pointer"
        transition="all 0.2s ease-in-out"
        // onClick={deleteValue}
      >
        <Icon name="wizard" size={7}></Icon>
      </Flex>
      <Flex
        position="absolute"
        zIndex={999}
        top="100%"
        left={0}
        flexDirection="column"
        opacity={show ? 1 : 0}
        pointerEvents={show ? "all" : "none"}
      >
        <Flex
          flexDirection="column"
          // rowGap={basePadding / 3}
          background="greys.lightt"
          borderRadius={4}
          boxShadow={props?.boxShadow || "0px 2px 7px 0px rgba(0,0,0,0.2)"}
          cursor="pointer"
          paddingY={basePadding}
        >
          <Flex
            alignItems="center"
            flexDirection="row"
            _hover={{
              background: "greys.light",
            }}
            paddingX={basePadding * 1}
            paddingY={basePadding / 2}
          >
            <Icon marginBottom="-2px" name="cyclone" size={iconSize}></Icon>
            <Text marginTop="-2px" paddingLeft={2} fontSize="xs">
              Types
            </Text>
          </Flex>
          <Flex
            flexDirection="column"
            // rowGap={basePadding}
            background="greys.lightt"
            cursor="pointer"
          >
            {types.map((type, idx) => {
              const ret = (
                <Flex
                  key={props?.uuid + props?.fullPath + "-type-menu-" + idx}
                  width="100%"
                  _hover={{
                    "&>div": {
                      background: "greys.light",
                    },
                  }}
                  onClick={() => onChangeType(type?.key || type)}
                  paddingY={1}
                >
                  <Flex
                    alignItems="center"
                    flexDirection="row"
                    width="100%"
                    paddingX={basePadding * 2}
                    paddingY={basePadding / 2}
                  >
                    <Icon
                      marginBottom="-2px"
                      name={type?.icon || type?.key || type?.label || type}
                      size={iconSize}
                    ></Icon>
                    <Text marginTop="-2px" paddingLeft={2} fontSize="xs">
                      {type?.label || type?.key || type}
                    </Text>
                  </Flex>
                </Flex>
              )
              return ret
            })}
          </Flex>
        </Flex>
      </Flex>
    </Center>
  )
}