Wojtek
76 lines
2.1 KiB
TypeScript
76 lines
2.1 KiB
TypeScript
import { useState } from 'react';
|
|
import { tv } from 'tailwind-variants';
|
|
import { Copy2 } from '../icons/Copy2';
|
|
import { Eye2 } from '../icons/Eye2';
|
|
import { EyeOff2 } from '../icons/EyeOff2';
|
|
import { IconButton } from './IconButton';
|
|
import { TextInput } from './TextInput';
|
|
|
|
type BlurredInputWithCopyProps = {
|
|
value: string;
|
|
label?: string;
|
|
name?: string;
|
|
hiddenLabel?: boolean;
|
|
className?: string;
|
|
initialShow?: boolean;
|
|
};
|
|
|
|
const blurredInputWithCopy = tv({
|
|
variants: {
|
|
show: {
|
|
false: 'text-blurred pointer-events-none',
|
|
},
|
|
},
|
|
});
|
|
|
|
export function BlurredInputWithCopy({
|
|
value,
|
|
label,
|
|
hiddenLabel,
|
|
className,
|
|
initialShow = false,
|
|
name = '',
|
|
}: BlurredInputWithCopyProps) {
|
|
const [show, setShow] = useState(initialShow);
|
|
|
|
return (
|
|
<TextInput
|
|
name={name}
|
|
value={value}
|
|
label={label}
|
|
hiddenLabel={hiddenLabel}
|
|
className={className}
|
|
inputClassName={blurredInputWithCopy({ show })}
|
|
readOnly
|
|
endDecorator={
|
|
<div>
|
|
<IconButton
|
|
onClick={() => setShow(!show)}
|
|
color="white"
|
|
className="mr-3 h-11 w-11 shadow-md"
|
|
size="xs"
|
|
roundness="sm"
|
|
type="button"
|
|
aria-label={show ? 'Hide text' : 'Show text'}
|
|
>
|
|
{show ? <EyeOff2 /> : <Eye2 />}
|
|
</IconButton>
|
|
<IconButton
|
|
color="white"
|
|
className="h-11 w-11 shadow-md"
|
|
size="xs"
|
|
roundness="sm"
|
|
type="button"
|
|
aria-label="Copy to clipboard"
|
|
onClick={() => {
|
|
navigator.clipboard.writeText(value);
|
|
}}
|
|
>
|
|
<Copy2 />
|
|
</IconButton>
|
|
</div>
|
|
}
|
|
/>
|
|
);
|
|
}
|