From 0d13212fea430dbebd4d38aca280b343718466da Mon Sep 17 00:00:00 2001
From: Gacktto <mandrafaquer123@gmail.com>
Date: Fri, 17 May 2024 20:17:50 -0300
Subject: [PATCH] =?UTF-8?q?Adicionei=20uma=20funcionalidade=20de=20redirec?=
 =?UTF-8?q?ionar=20o=20endere=C3=A7o=20diretamente=20para=20o=20Google=20M?=
 =?UTF-8?q?aps=20e=20um=20segundo=20Icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CardAboutShelter/CardAboutShelter.tsx     | 20 ++++++++++++++++---
 .../components/InfoRow/InfoRow.tsx            |  4 ++++
 .../components/InfoRow/types.ts               |  1 +
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/CardAboutShelter/CardAboutShelter.tsx b/src/components/CardAboutShelter/CardAboutShelter.tsx
index cff1ea22..774a4dc3 100644
--- a/src/components/CardAboutShelter/CardAboutShelter.tsx
+++ b/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>
diff --git a/src/components/CardAboutShelter/components/InfoRow/InfoRow.tsx b/src/components/CardAboutShelter/components/InfoRow/InfoRow.tsx
index da5007a2..62e9bad0 100644
--- a/src/components/CardAboutShelter/components/InfoRow/InfoRow.tsx
+++ b/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>
     );
   }
diff --git a/src/components/CardAboutShelter/components/InfoRow/types.ts b/src/components/CardAboutShelter/components/InfoRow/types.ts
index 710aabd1..fdc6675f 100644
--- a/src/components/CardAboutShelter/components/InfoRow/types.ts
+++ b/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;
 }