81fbaeae44
* Style project settings on mobile * Use auto-resize text area for display name * Remove unused import
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { HStack, Icon, IconButton, Tooltip, Text } from "@chakra-ui/react";
|
|
import { useState } from "react";
|
|
import { MdContentCopy } from "react-icons/md";
|
|
import { useHandledAsyncCallback } from "~/utils/hooks";
|
|
|
|
const CopiableCode = ({ code }: { code: string }) => {
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
const [copyToClipboard] = useHandledAsyncCallback(async () => {
|
|
await navigator.clipboard.writeText(code);
|
|
setCopied(true);
|
|
}, [code]);
|
|
return (
|
|
<HStack
|
|
backgroundColor="blackAlpha.800"
|
|
color="white"
|
|
borderRadius={4}
|
|
padding={3}
|
|
w="full"
|
|
justifyContent="space-between"
|
|
>
|
|
<Text fontFamily="inconsolata" fontWeight="bold" letterSpacing={0.5} overflowX="auto">
|
|
{code}
|
|
</Text>
|
|
<Tooltip closeOnClick={false} label={copied ? "Copied!" : "Copy to clipboard"}>
|
|
<IconButton
|
|
aria-label="Copy"
|
|
icon={<Icon as={MdContentCopy} boxSize={5} />}
|
|
size="xs"
|
|
colorScheme="white"
|
|
variant="ghost"
|
|
onClick={copyToClipboard}
|
|
onMouseLeave={() => setCopied(false)}
|
|
/>
|
|
</Tooltip>
|
|
</HStack>
|
|
);
|
|
};
|
|
|
|
export default CopiableCode;
|