react-icons/bi#BiCopy TypeScript Examples
The following examples show how to use
react-icons/bi#BiCopy.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: CodeBlock.tsx From slice-machine with Apache License 2.0 | 5 votes |
|
CodeBlock: React.FC<CodeBlockProps> = ({ code, lang }) => {
const { theme } = useThemeUI();
const [isCopied, setIsCopied] = useState(false);
const copy = (): void => {
code &&
navigator.clipboard.writeText(code).then(() => {
setIsCopied(true);
setTimeout(() => {
setIsCopied(false);
}, 1200);
});
};
return code ? (
<Flex
sx={{
p: 2,
px: 3,
alignItems: "center",
borderTop: "1px solid",
borderColor: "borders",
justifyContent: "space-between",
}}
>
<Flex
sx={{
alignItems: "center",
display: ["none", "none", "flex"],
maxWidth: "80%",
}}
>
<BsCode
size={26}
color={theme?.colors?.icons as string | undefined}
style={{
border: "1px solid",
borderColor: theme?.colors?.borders as string | undefined,
borderRadius: "3px",
padding: "4px",
marginRight: "2px",
}}
/>
<Code
sx={{
margin: "0px 8px",
border: "none",
borderRadius: "3px",
fontSize: "13px",
}}
lang={lang}
>
{code}
</Code>
</Flex>
<Box>
<Button onClick={copy} variant="textButton">
{isCopied ? (
<MdCheck
size={16}
color={theme?.colors?.success as string | undefined}
style={buttonIconStyle}
/>
) : (
<BiCopy size={16} style={buttonIconStyle} />
)}
<Text
as="span"
sx={{ display: ["none", "inline", "none", "inline"] }}
>
Copy
</Text>
</Button>
</Box>
</Flex>
) : null;
}
Example #2
| Source File: ProxyServiceField.tsx From bluebubbles-server with Apache License 2.0 | 4 votes |
|
ProxyServiceField = ({ helpText, showAddress = true }: ProxyServiceFieldProps): JSX.Element => {
const dispatch = useAppDispatch();
const dnsRef = useRef(null);
const alertRef = useRef(null);
const proxyService: string = (useAppSelector(state => state.config.proxy_service) ?? '').toLowerCase().replace(' ', '-');
const address: string = useAppSelector(state => state.config.server_address) ?? '';
const port: number = useAppSelector(state => state.config.socket_port) ?? 1234;
const [dnsModalOpen, setDnsModalOpen] = useBoolean();
const [requiresConfirmation, confirm] = useState((): string | null => {
return null;
});
return (
<FormControl>
<FormLabel htmlFor='proxy_service'>Proxy Service</FormLabel>
<Flex flexDirection='row' justifyContent='flex-start' alignItems='center'>
<Select
id='proxy_service'
placeholder='Select Proxy Service'
maxWidth="15em"
mr={3}
value={proxyService}
onChange={(e) => {
if (!e.target.value || e.target.value.length === 0) return;
onSelectChange(e);
if (e.target.value === 'dynamic-dns') {
setDnsModalOpen.on();
} else if (e.target.value === 'cloudflare') {
confirm('confirmation');
}
}}
>
<option value='ngrok'>Ngrok</option>
<option value='cloudflare'>Cloudflare</option>
<option value='dynamic-dns'>Dynamic DNS</option>
</Select>
{(proxyService === 'dynamic-dns')
? (
<IconButton
mr={3}
aria-label='Set address'
icon={<AiOutlineEdit />}
onClick={() => setDnsModalOpen.on()}
/>
) : null}
{(showAddress) ? (
<>
<Text fontSize="md" color="grey">Address: {address}</Text>
<IconButton
ml={3}
aria-label='Copy address'
icon={<BiCopy />}
onClick={() => copyToClipboard(address)}
/>
</>
) : null}
</Flex>
<FormHelperText>
{helpText ?? 'Select a proxy service to use to make your server internet-accessible. Without one selected, your server will only be accessible on your local network'}
</FormHelperText>
<DynamicDnsDialog
modalRef={dnsRef}
onConfirm={(address) => dispatch(setConfig({ name: 'server_address', value: address }))}
isOpen={dnsModalOpen}
port={port as number}
onClose={() => setDnsModalOpen.off()}
/>
<ConfirmationDialog
title="Notice"
modalRef={alertRef}
onClose={() => confirm(null)}
body={confirmationActions[requiresConfirmation as string]?.message}
acceptText="OK"
declineText={null}
onAccept={() => {
confirmationActions[requiresConfirmation as string].func();
}}
isOpen={requiresConfirmation !== null}
/>
</FormControl>
);
}
Example #3
| Source File: HomeLayout.tsx From bluebubbles-server with Apache License 2.0 | 4 votes |
|
HomeLayout = (): JSX.Element => {
const address = useAppSelector(state => state.config.server_address);
const fcmClient = useAppSelector(state => state.config.fcm_client);
const password = useAppSelector(state => state.config.password);
const port = useAppSelector(state => state.config.socket_port);
const qrCode = fcmClient ? buildQrData(password, address, fcmClient) : null;
return (
<Box p={3} borderRadius={10}>
<Flex flexDirection="column">
<Stack direction='column' p={5}>
<Flex flexDirection='row' justifyContent='flex-start' alignItems='center'>
<Text fontSize='2xl'>Connection Details</Text>
<Popover trigger='hover'>
<PopoverTrigger>
<Box ml={2} _hover={{ color: 'brand.primary', cursor: 'pointer' }}>
<AiOutlineInfoCircle />
</Box>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>Information</PopoverHeader>
<PopoverBody>
<Text>
This page will detail your current connection details. This includes your
server address and your local port.
</Text>
<br />
<UnorderedList>
<ListItem><strong>Server Address:</strong> This is the address that your clients will connect to</ListItem>
<ListItem><strong>Local Port:</strong> This is the port that the HTTP server is running on,
and the port you will use when port forwarding
for a dynamic DNS
</ListItem>
</UnorderedList>
</PopoverBody>
</PopoverContent>
</Popover>
</Flex>
<Divider orientation='horizontal' />
<Spacer />
<Flex flexDirection="row" justifyContent="space-between">
<Stack>
<Flex flexDirection="row" alignItems='center'>
<Text fontSize='md' fontWeight='bold' mr={2}>Server Address: </Text>
{(!address) ? (
<SkeletonText noOfLines={1} />
) : (
<Text fontSize='md'>{address}</Text>
)}
<Tooltip label='Copy Address'>
<IconButton
ml={3}
size='md'
aria-label='Copy Address'
icon={<BiCopy size='22px' />}
onClick={() => copyToClipboard(address)}
/>
</Tooltip>
<Popover placement='bottom' isLazy={true}>
<PopoverTrigger>
<Box ml={2} _hover={{ color: 'brand.primary', cursor: 'pointer' }} >
<Tooltip label='Show QR Code'>
<IconButton
ml={1}
size='md'
aria-label='Show QR Code'
icon={<AiOutlineQrcode size='24px' />}
/>
</Tooltip>
</Box>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>QR Code</PopoverHeader>
<PopoverBody>
<Flex justifyContent='center' flexDirection='column' alignItems='center'>
<Text>
Your QR Code contains your server configuration so that clients can connect.
Your QR Code should remain <strong>private</strong> as it contains sensitive information!
</Text>
<Box border="5px solid" borderColor='white' mt={4} height='266px' width='266px' borderRadius='lg' mb={3}>
{/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
{/* @ts-ignore: ts2876 */}
{(qrCode) ? <QRCode value={qrCode as string} /> : null}
</Box>
</Flex>
</PopoverBody>
</PopoverContent>
</Popover>
</Flex>
<Flex flexDirection="row">
<Text fontSize='md' fontWeight='bold' mr={2}>Local Port: </Text>
{(!port) ? (
<SkeletonText noOfLines={1} />
) : (
<Text fontSize='md'>{port}</Text>
)}
</Flex>
</Stack>
<Divider orientation="vertical" />
</Flex>
</Stack>
<Stack direction='column' p={5}>
<Flex flexDirection='row' justifyContent='flex-start' alignItems='center'>
<Text fontSize='2xl'>iMessage Highlights</Text>
<Popover trigger='hover'>
<PopoverTrigger>
<Box ml={2} _hover={{ color: 'brand.primary', cursor: 'pointer' }}>
<AiOutlineInfoCircle />
</Box>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>Information</PopoverHeader>
<PopoverBody>
<Text>
These are just some fun stats that I included to give you a quick "snapshot"
of your iMessage history on the Mac Device. This does not include messages that
are on Apple's servers, only what is local to this device.
</Text>
</PopoverBody>
</PopoverContent>
</Popover>
</Flex>
<Divider orientation='horizontal' />
<Spacer />
{ /* Delays are so older systems do not freeze when requesting data from the databases */ }
<SimpleGrid columns={3} spacing={5}>
<TotalMessagesStatBox />
<TopGroupStatBox delay={200} />
<BestFriendStatBox delay={400} />
<DailyMessagesStatBox delay={600} />
<TotalPicturesStatBox delay={800} />
<TotalVideosStatBox delay={1000} />
</SimpleGrid>
</Stack>
</Flex>
</Box>
);
}
