diff --git a/packages/status-react/src/system/copy-input/copy-input.docs.mdx b/packages/status-react/src/system/copy-input/copy-input.docs.mdx new file mode 100644 index 00000000..4c5593a5 --- /dev/null +++ b/packages/status-react/src/system/copy-input/copy-input.docs.mdx @@ -0,0 +1,5 @@ +# TextInput + +```tsx +import { TextInput } from '@status-im/components' +``` diff --git a/packages/status-react/src/system/copy-input/copy-input.tsx b/packages/status-react/src/system/copy-input/copy-input.tsx new file mode 100644 index 00000000..19cffe8a --- /dev/null +++ b/packages/status-react/src/system/copy-input/copy-input.tsx @@ -0,0 +1,44 @@ +import React, { forwardRef, useRef } from 'react' + +import { composeRefs } from '@radix-ui/react-compose-refs' + +import { TextInput } from '../text-input' +import { CopyButton, Wrapper } from './styles' + +import type { Ref } from 'react' + +interface Props { + value: string + label?: string +} + +const CopyInput = (props: Props, ref: Ref) => { + const { value, label } = props + + const inputRef = useRef(null) + + const handleCopy = () => { + navigator.clipboard.writeText(value) + inputRef.current?.select() + } + + return ( + + inputRef.current?.select()} + label={label} + /> + + Copy + + + ) +} + +const _CopyInput = forwardRef(CopyInput) + +export { _CopyInput as CopyInput } +export type { Props as CopyInputProps } diff --git a/packages/status-react/src/system/copy-input/index.tsx b/packages/status-react/src/system/copy-input/index.tsx new file mode 100644 index 00000000..ba18da5a --- /dev/null +++ b/packages/status-react/src/system/copy-input/index.tsx @@ -0,0 +1,2 @@ +export type { CopyInputProps } from './copy-input' +export { CopyInput } from './copy-input' diff --git a/packages/status-react/src/system/copy-input/styles.tsx b/packages/status-react/src/system/copy-input/styles.tsx new file mode 100644 index 00000000..eddfd2aa --- /dev/null +++ b/packages/status-react/src/system/copy-input/styles.tsx @@ -0,0 +1,23 @@ +import { styled } from '~/src/styles/config' + +export const Wrapper = styled('div', { + position: 'relative', +}) + +export const CopyButton = styled('button', { + fontFamily: '$sans', + position: 'absolute', + right: 8, + bottom: 8, + fontSize: 12, + lineHeight: 1.2, + borderRadius: '$8', + padding: '6px 12px', + background: '$primary-3', + color: '$primary-1', + border: '1px solid $primary-1', + + '&:hover': { + background: '$primary-2', + }, +}) diff --git a/packages/status-react/src/system/index.tsx b/packages/status-react/src/system/index.tsx index 333bd031..db1d6aa1 100644 --- a/packages/status-react/src/system/index.tsx +++ b/packages/status-react/src/system/index.tsx @@ -2,6 +2,7 @@ export { Avatar } from './avatar' export { Box } from './box' export { Button } from './button' export { ContextMenu, ContextMenuTrigger } from './context-menu' +export { CopyInput } from './copy-input' export { AlertDialog, AlertDialogTrigger,