ox_lib/web/src/features/dev/index.tsx

import {
  Button,
  Drawer,
  DrawerBody,
  DrawerContent,
  DrawerHeader,
  DrawerOverlay,
  IconButton,
  Tooltip,
  VStack,
  Divider,
  useDisclosure,
} from "@chakra-ui/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { debugAlert } from "./debug/alert";
import { debugContext } from "./debug/context";
import { debugInput } from "./debug/input";
import { debugMenu } from "./debug/menu";
import {
  debugCustomNotification,
  debugNotification,
} from "./debug/notification";
import { debugCircleProgressbar, debugProgressbar } from "./debug/progress";
import { debugTextUI } from "./debug/textui";
import { debugSettings } from "./debug/settings";

const Dev: React.FC = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Tooltip label="Developer drawer">
        <IconButton
          position="absolute"
          bottom={0}
          right={0}
          mr={20}
          mb={20}
          borderRadius="50%"
          icon={<FontAwesomeIcon icon="wrench" fixedWidth size="lg" />}
          colorScheme="orange"
          size="lg"
          aria-label="Dev tools"
          onClick={() => onOpen()}
        />
      </Tooltip>
      <Drawer placement="left" onClose={onClose} isOpen={isOpen}>
        <DrawerOverlay />
        <DrawerContent>
          <DrawerHeader>Developer drawer</DrawerHeader>
          <DrawerBody>
            <VStack>
              <Divider />
              <Button isFullWidth onClick={() => debugInput()}>
                Open input dialog
              </Button>
              <Button isFullWidth onClick={() => debugAlert()}>
                Open alert dialog
              </Button>
              <Divider />
              <Button isFullWidth onClick={() => debugContext()}>
                Open context menu
              </Button>
              <Button isFullWidth onClick={() => debugMenu()}>
                Open list menu
              </Button>
              <Divider />
              <Button isFullWidth onClick={() => debugCustomNotification()}>
                Send custom notification
              </Button>
              <Button isFullWidth onClick={() => debugNotification()}>
                Send default notification
              </Button>
              <Divider />
              <Button isFullWidth onClick={() => debugProgressbar()}>
                Activate progress bar
              </Button>
              <Button isFullWidth onClick={() => debugCircleProgressbar()}>
                Activate progress circle
              </Button>
              <Divider />
              <Button isFullWidth onClick={() => debugSettings()}>
                Open settings page
              </Button>
              <Button isFullWidth onClick={() => debugTextUI()}>
                Show TextUI
              </Button>
            </VStack>
          </DrawerBody>
        </DrawerContent>
      </Drawer>
    </>
  );
};

export default Dev;