add a copy to clipboard button to PIX and contact info (#124)

* add a copy to clipboard button to PIX and contact info

* use && operator instead of ternary

Author: migueldalberto

src/components/CardAboutShelter/CardAboutShelter.tsx

@@ -65,11 +65,13 @@ const CardAboutShelter = (props: ICardAboutShelter) => {
           value={
             check(shelter.contact) ? `${shelter.contact}` : 'Não informado'
           }
+          clipboardButton={check(shelter.contact)}
         />
         <InfoRow
           icon={<Landmark />}
           label="Chave Pix:"
           value={check(shelter.pix) ? `${shelter.pix}` : 'Não informado'}
+          clipboardButton={check(shelter.pix)}
         />
       </div>
     </Card>

src/components/CardAboutShelter/components/InfoRow/InfoRow.tsx

@@ -4,7 +4,7 @@ import { IInfoRowProps } from './types';
 
 const InfoRow = React.forwardRef<HTMLDivElement, IInfoRowProps>(
   (props, ref) => {
-    const { icon, label, value, className = '', ...rest } = props;
+    const { icon, label, value, clipboardButton = false, className = '', ...rest } = props;
     const isLink = value?.startsWith('http');
     const ValueComp = !value ? (
       <Fragment />
@@ -35,7 +35,18 @@ const InfoRow = React.forwardRef<HTMLDivElement, IInfoRowProps>(
           <span className={cn('font-normal', value ? 'text-nowrap' : '')}>
             {label}
           </span>
-          <span className="md:flex">{ValueComp}</span>
+          <span className="md:flex">
+            {ValueComp}
+            {clipboardButton && (
+              <div
+                className="text-blue-600 mx-2 hover:cursor-pointer active:text-blue-800"
+                onClick={() => navigator.clipboard.writeText(value)}
+              >
+                copiar
+              </div>
+            )}
+          </span>
+
         </div>
       </div>
     );

src/components/CardAboutShelter/components/InfoRow/types.ts

@@ -2,4 +2,5 @@ export interface IInfoRowProps extends React.ComponentPropsWithoutRef<'div'> {
   label: React.ReactNode;
   value?: string;
   icon: React.ReactNode;
+  clipboardButton?: boolean;
 }