forked from mirrors/thatmattlove-hyperglass
39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import dynamic from 'next/dynamic';
|
|
import { Box, Flex, Icon, IconButton, Slide } from '@chakra-ui/react';
|
|
import { useColorValue } from '~/context';
|
|
import { useLGState, useOpposingColor } from '~/hooks';
|
|
|
|
import type { TResetButton } from './types';
|
|
|
|
const LeftArrow = dynamic<MeronexIcon>(() => import('@meronex/icons/fa').then(i => i.FaAngleLeft));
|
|
|
|
export const ResetButton = (props: TResetButton) => {
|
|
const { developerMode, resetForm, ...rest } = props;
|
|
const { isSubmitting } = useLGState();
|
|
const bg = useColorValue('primary.500', 'primary.300');
|
|
const color = useOpposingColor(bg);
|
|
return (
|
|
<Slide direction="left" in={isSubmitting.value} unmountOnExit style={{ width: 'auto' }}>
|
|
<Box
|
|
bg={bg}
|
|
left={0}
|
|
zIndex={4}
|
|
bottom={24}
|
|
boxSize={12}
|
|
color={color}
|
|
position="fixed"
|
|
borderRightRadius="md"
|
|
mb={developerMode ? 14 : undefined}>
|
|
<Flex boxSize="100%" justifyContent="center" alignItems="center" {...rest}>
|
|
<IconButton
|
|
color="current"
|
|
variant="ghost"
|
|
aria-label="Reset"
|
|
onClick={resetForm}
|
|
icon={<Icon as={LeftArrow} boxSize={8} />}
|
|
/>
|
|
</Flex>
|
|
</Box>
|
|
</Slide>
|
|
);
|
|
};
|