FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-19 07:56:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web/dev): mantine rewrite

Browse Source
This commit is contained in:
Luke
2022-12-16 12:03:31 +01:00
parent 5206f8b81b
commit 1893b66014
1 changed files with 56 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
web/src/features/dev/index.tsx
View File

@@ -1,16 +1,4 @@
import { import { ActionIcon, Tooltip, Drawer, Stack, Divider, Button } from '@mantine/core';
Button,
Drawer,
DrawerBody,
DrawerContent,
DrawerHeader,
DrawerOverlay,
IconButton,
Tooltip,
VStack,
Divider,
useDisclosure,
} from '@chakra-ui/react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { debugAlert } from './debug/alert'; import { debugAlert } from './debug/alert';
import { debugContext } from './debug/context'; import { debugContext } from './debug/context';
@@ -20,72 +8,67 @@ import { debugCustomNotification, debugNotification } from './debug/notification
import { debugCircleProgressbar, debugProgressbar } from './debug/progress'; import { debugCircleProgressbar, debugProgressbar } from './debug/progress';
import { debugTextUI } from './debug/textui'; import { debugTextUI } from './debug/textui';
import { debugSkillCheck } from './debug/skillcheck'; import { debugSkillCheck } from './debug/skillcheck';
import { useState } from 'react';
const Dev: React.FC = () => { const Dev: React.FC = () => {
const { isOpen, onOpen, onClose } = useDisclosure(); const [opened, setOpened] = useState(false);
return ( return (
<> <>
<Tooltip label="Developer drawer"> <Tooltip label="Developer drawer" position="bottom">
<IconButton <ActionIcon
position="absolute" onClick={() => setOpened(true)}
bottom={0} radius="xl"
right={0} variant="filled"
mr={20} color="orange"
mb={20} sx={{ position: 'absolute', bottom: 0, right: 0, width: 50, height: 50 }}
borderRadius="50%" size="xl"
icon={<FontAwesomeIcon icon="wrench" fixedWidth size="lg" />} mr={50}
colorScheme="orange" mb={50}
size="lg" >
aria-label="Dev tools" <FontAwesomeIcon icon="wrench" fontSize={24} />
onClick={() => onOpen()} </ActionIcon>
/>
</Tooltip> </Tooltip>
<Drawer placement="left" onClose={onClose} isOpen={isOpen}>
<DrawerOverlay /> <Drawer position="left" onClose={() => setOpened(false)} opened={opened} title="Developer drawer" padding="xl">
<DrawerContent> <Stack>
<DrawerHeader>Developer drawer</DrawerHeader> <Divider />
<DrawerBody> <Button fullWidth onClick={() => debugInput()}>
<VStack> Open input dialog
<Divider /> </Button>
<Button width="full" onClick={() => debugInput()}> <Button fullWidth onClick={() => debugAlert()}>
Open input dialog Open alert dialog
</Button> </Button>
<Button width="full" onClick={() => debugAlert()}> <Divider />
Open alert dialog <Button fullWidth onClick={() => debugContext()}>
</Button> Open context menu
<Divider /> </Button>
<Button width="full" onClick={() => debugContext()}> <Button fullWidth onClick={() => debugMenu()}>
Open context menu Open list menu
</Button> </Button>
<Button width="full" onClick={() => debugMenu()}> <Divider />
Open list menu <Button fullWidth onClick={() => debugCustomNotification()}>
</Button> Send custom notification
<Divider /> </Button>
<Button width="full" onClick={() => debugCustomNotification()}> <Button fullWidth onClick={() => debugNotification()}>
Send custom notification Send default notification
</Button> </Button>
<Button width="full" onClick={() => debugNotification()}> <Divider />
Send default notification <Button fullWidth onClick={() => debugProgressbar()}>
</Button> Activate progress bar
<Divider /> </Button>
<Button width="full" onClick={() => debugProgressbar()}> <Button fullWidth onClick={() => debugCircleProgressbar()}>
Activate progress bar Activate progress circle
</Button> </Button>
<Button width="full" onClick={() => debugCircleProgressbar()}> <Divider />
Activate progress circle <Button fullWidth onClick={() => debugTextUI()}>
</Button> Show TextUI
<Divider /> </Button>
<Button width="full" onClick={() => debugTextUI()}> <Divider />
Show TextUI <Button fullWidth onClick={() => debugSkillCheck()}>
</Button> Run skill check
<Divider /> </Button>
<Button width="full" onClick={() => debugSkillCheck()}> </Stack>
Run skill check
</Button>
</VStack>
</DrawerBody>
</DrawerContent>
</Drawer> </Drawer>
</> </>
); );