packages/components/containers/organization/sso/ReadonlyFieldWithCopy.tsx

   1 import { c } from 'ttag';
   2
   3 import type { Input } from '@proton/atoms';
   4 import Copy from '@proton/components/components/button/Copy';
   5 import type { InputFieldProps } from '@proton/components/components/v2/field/InputField';
   6 import InputFieldTwo from '@proton/components/components/v2/field/InputField';
   7 import useNotifications from '@proton/components/hooks/useNotifications';
   8 import clsx from '@proton/utils/clsx';
   9
  10 interface Props extends Omit<InputFieldProps<typeof Input>, 'readonly' | 'unstyled'> {}
  11
  12 const ReadonlyFieldWithCopy = ({ value, inputContainerClassName, ...rest }: Props) => {
  13     const { createNotification } = useNotifications();
  14
  15     const onCopy = () => {
  16         createNotification({ text: c('Info').t`Copied to clipboard` });
  17     };
  18
  19     return (
  20         <InputFieldTwo
  21             value={value}
  22             readOnly
  23             inputContainerClassName={clsx('w-full', inputContainerClassName)}
  24             suffix={<Copy size="small" shape="ghost" color="weak" value={`${value}`} onCopy={onCopy} />}
  25             {...rest}
  26         />
  27     );
  28 };
  29
  30 export default ReadonlyFieldWithCopy;