git.iko.soy/bridge
on master help sign in
bridge/src/views/Activate/MasterKeyCopy.tsx
37 lines 1.1 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 color={color} icon={icon as 'Checkmark' | 'Copy'} size="16px" />
27 <Text color={color} fontSize={'14px'} ml="4px" fontFamily={'Inter'}>
28 {label}
29 </Text>
30 </Box>
31 </Box>
32 );
33};
35export default MasterKeyCopy;
37export const FadeableMasterKeyCopy = withFadeable(MasterKeyCopy);