Implementar Ver Endereço no Mapa na pagina Detalhes do Abrigo

src/components/CardAboutShelter/CardAboutShelter.tsx

@@ -1,5 +1,4 @@
 import {
-  Home,
   UsersRound,
   HandHeart,
   PawPrint,
@@ -12,23 +11,22 @@ import {
 import { Card } from '../ui/card';
 import { ICardAboutShelter } from './types';
 import { InfoRow } from './components';
-import { checkAndFormatAddress } from './utils';
 import { ShelterCategory } from '@/hooks/useShelter/types';
 import { Fragment } from 'react/jsx-runtime';
+import { AddressInfoRow } from './components/AddressInfoRow';
 
 const CardAboutShelter = (props: ICardAboutShelter) => {
   const { shelter } = props;
 
   const check = (v?: string | number | boolean | null) => {
     return v !== undefined && v !== null;
   };
-  const formatAddress = checkAndFormatAddress(shelter, false);
 
   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} />
+        <AddressInfoRow shelter={shelter} />
         {Boolean(shelter.city) && (
           <InfoRow icon={<Building />} label="Cidade:" value={shelter.city} />
         )}

src/components/CardAboutShelter/components/AddressInfoRow/AddressInfoRow.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Home, Map } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+import { ICardAboutShelter } from '../../types';
+import { checkAndFormatAddress, getGoogleMapsUrlTo } from '../../utils';
+
+const AddressInfoRow = ({ shelter } : ICardAboutShelter) => {
+
+    const formatAddress = checkAndFormatAddress(shelter, false);
+    const googleMapsUrl = getGoogleMapsUrlTo(formatAddress);
+
+    return (
+      <>
+        <div className={cn(
+          'flex items-start gap-2 font-medium w-full',
+          'md:flex'
+        )}>
+            {React.cloneElement(<Home /> as any, {
+              className: 'min-w-5 min-h-5 w-5 h-5 stroke-muted-foreground',
+            })}
+            <div className={cn('flex flex-col gap-2 items-start', 'sm:flex-row')}>
+              <a href={googleMapsUrl} target="_blank" rel="noopener noreferrer">
+                <span className={'font-normal'}>
+                  {formatAddress}
+                </span>
+              </a>
+            </div>
+        </div>
+        <div className={cn(
+          'flex items-start gap-2 font-medium w-full',
+          'md:flex'
+        )}>
+            {React.cloneElement(<Map /> as any, {
+              className: 'min-w-5 min-h-5 w-5 h-5 stroke-muted-foreground',
+            })}
+            <div className={cn('flex flex-col gap-2 items-start', 'sm:flex-row')}>
+              <a href={googleMapsUrl} target="_blank" rel="noopener noreferrer">
+                <span className={'font-normal'}>
+                  <u>Ver endereço no mapa</u>
+                </span>
+              </a>
+            </div>
+        </div>
+      </>
+    );
+  };
+
+export { AddressInfoRow };

src/components/CardAboutShelter/components/AddressInfoRow/index.ts

@@ -0,0 +1,3 @@
+import { AddressInfoRow } from './AddressInfoRow';
+
+export { AddressInfoRow };

src/components/CardAboutShelter/utils.ts

@@ -25,4 +25,7 @@ const checkAndFormatAddress = (
   );
 };
 
-export { checkAndFormatAddress };
+const getGoogleMapsUrlTo = (address: string): string =>
+  `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`;
+
+export { checkAndFormatAddress, getGoogleMapsUrlTo };