git.iko.soy/bridge
on feb602f help sign in
bridge/src/views/Activate/MasterKeyCopy.tsx
42 lines 1.2 kB history raw
1import { Box, Icon, Text } from '@tlon/indigo-react';
2import cn from 'classnames';
3import useCopiable from '../../lib/useCopiable';
4import withFadeable from './withFadeable';
6interface MasterKeyCopyProps {
7 text: string;
8 className?: string;
9}
11const MasterKeyCopy = ({ text, className }: MasterKeyCopyProps) => {
12 const [doCopy, didCopy] = useCopiable(text);
13 const { color, label, icon } = didCopy
14 ? { color: 'rgb(70,156,106)', label: 'Copied', icon: 'Checkmark' }
15 : { color: 'rgb(89,167,248)', label: 'Copy', icon: 'Copy' };
17 return (
18 <Box className={cn(['mk-copy', className])} onClick={() => doCopy()}>
19 <Box
20 display={'flex'}
21 flexDirection={'row'}
22 flexWrap={'nowrap'}
23 alignItems={'center'}
24 cursor={'pointer'}
25 padding={'10px 15px'}>
26 <Icon
27 color={color}
28 icon={icon as 'Checkmark' | 'Copy'}
29 size="18px"
30 mx="2px"
31 />
32 <Text color={color} fontSize={'18px'} mx="2px" fontFamily={'Inter'}>
33 {label}
34 </Text>
35 </Box>
36 </Box>
37 );
38};
40export default MasterKeyCopy;
42export const FadeableMasterKeyCopy = withFadeable(MasterKeyCopy);