git.iko.soy/bridge
on df0c310 help sign in
bridge/src/views/Activate/MasterKeyCopy.tsx
41 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="16px"
30 />
31 <Text color={color} fontSize={'14px'} ml="4px" fontFamily={'Inter'}>
32 {label}
33 </Text>
34 </Box>
35 </Box>
36 );
37};
39export default MasterKeyCopy;
41export const FadeableMasterKeyCopy = withFadeable(MasterKeyCopy);