feature: Adicionei uma funcionalidade de redirecionar o endereço diretamente para o Google Maps e um segundo Icon

src/components/CardAboutShelter/CardAboutShelter.tsx

@@ -7,8 +7,10 @@ import {
   Smartphone,
   Building,
   MapPinned,
+  ExternalLink
 } from 'lucide-react';
 
+import { cn } from '@/lib/utils';
 import { Card } from '../ui/card';
 import { ICardAboutShelter } from './types';
 import { InfoRow } from './components';
@@ -22,16 +24,23 @@ const CardAboutShelter = (props: ICardAboutShelter) => {
   };
   const formatAddress = checkAndFormatAddress(shelter, false);
 
+  const openGoogleMaps = () => {
+    if (formatAddress) {
+      const googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(formatAddress)}`;
+      window.open(googleMapsUrl, '_blank');
+    }
+  };
+
   return (
     <Card className="flex flex-col gap-2 p-4 bg-[#E8F0F8] text-sm">
       <div className="text-[#646870] font-medium">Sobre o abrigo</div>
       <div className="flex flex-col flex-wrap gap-3">
-        <InfoRow icon={<Home />} label={formatAddress} />
+        <InfoRow icon={<Home />} label={formatAddress} onClick={openGoogleMaps} iconTwo={<ExternalLink />} className={cn('cursor-pointer')}/>
         {Boolean(shelter.city) && (
-          <InfoRow icon={<Building />} label="Cidade:" value={shelter.city} />
+          <InfoRow icon={<Building />} label="Cidade:" value={shelter.city} iconTwo={<></>} />
         )}
         {Boolean(shelter.zipCode) && (
-          <InfoRow icon={<MapPinned />} label="CEP:" value={shelter.zipCode} />
+          <InfoRow icon={<MapPinned />} label="CEP:" value={shelter.zipCode} iconTwo={<></>}/>
         )}
         <InfoRow
           icon={<PawPrint />}
@@ -50,6 +59,7 @@ const CardAboutShelter = (props: ICardAboutShelter) => {
               <b>Não informado se aceita animais</b>
             )
           }
+          iconTwo={<></>}
         />
         <InfoRow
           icon={<HandHeart />}
@@ -59,6 +69,7 @@ const CardAboutShelter = (props: ICardAboutShelter) => {
               ? `${shelter.shelteredPeople} pessoas`
               : 'Não informado'
           }
+          iconTwo={<></>}
         />
         <InfoRow
           icon={<UsersRound />}
@@ -68,6 +79,7 @@ const CardAboutShelter = (props: ICardAboutShelter) => {
               ? `${shelter.capacity} pessoas`
               : 'Não informado'
           }
+          iconTwo={<></>}
         />
         <InfoRow
           icon={<Smartphone />}
@@ -76,12 +88,14 @@ const CardAboutShelter = (props: ICardAboutShelter) => {
             check(shelter.contact) ? `${shelter.contact}` : 'Não informado'
           }
           clipboardButton={check(shelter.contact)}
+          iconTwo={<></>}
         />
         <InfoRow
           icon={<Landmark />}
           label="Chave Pix:"
           value={check(shelter.pix) ? `${shelter.pix}` : 'Não informado'}
           clipboardButton={check(shelter.pix)}
+          iconTwo={<></>}
         />
       </div>
     </Card>

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

@@ -10,6 +10,7 @@ const InfoRow = React.forwardRef<HTMLDivElement, IInfoRowProps>(
       value,
       clipboardButton = false,
       className = '',
+      iconTwo,
       ...rest
     } = props;
     const isLink = value?.startsWith('http');
@@ -56,6 +57,9 @@ const InfoRow = React.forwardRef<HTMLDivElement, IInfoRowProps>(
             )}
           </span>
         </div>
+        {React.cloneElement(iconTwo as any, {
+          className: 'min-w-5 min-h-5 w-5 h-5 stroke-muted-foreground',
+        })}
       </div>
     );
   }

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

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