diff --git a/src/components/CardAboutShelter/CardAboutShelter.tsx b/src/components/CardAboutShelter/CardAboutShelter.tsx index 34525112..5c77932a 100644 --- a/src/components/CardAboutShelter/CardAboutShelter.tsx +++ b/src/components/CardAboutShelter/CardAboutShelter.tsx @@ -1,5 +1,4 @@ import { - Home, UsersRound, HandHeart, PawPrint, @@ -12,9 +11,9 @@ 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; @@ -22,13 +21,12 @@ const CardAboutShelter = (props: ICardAboutShelter) => { const check = (v?: string | number | boolean | null) => { return v !== undefined && v !== null; }; - const formatAddress = checkAndFormatAddress(shelter, false); return (
Sobre o abrigo
- } label={formatAddress} /> + {Boolean(shelter.city) && ( } label="Cidade:" value={shelter.city} /> )} diff --git a/src/components/CardAboutShelter/components/AddressInfoRow/AddressInfoRow.tsx b/src/components/CardAboutShelter/components/AddressInfoRow/AddressInfoRow.tsx new file mode 100644 index 00000000..aa87791d --- /dev/null +++ b/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 ( + <> +
+ {React.cloneElement( as any, { + className: 'min-w-5 min-h-5 w-5 h-5 stroke-muted-foreground', + })} + +
+
+ {React.cloneElement( as any, { + className: 'min-w-5 min-h-5 w-5 h-5 stroke-muted-foreground', + })} + +
+ + ); + }; + +export { AddressInfoRow }; diff --git a/src/components/CardAboutShelter/components/AddressInfoRow/index.ts b/src/components/CardAboutShelter/components/AddressInfoRow/index.ts new file mode 100644 index 00000000..d27ae07e --- /dev/null +++ b/src/components/CardAboutShelter/components/AddressInfoRow/index.ts @@ -0,0 +1,3 @@ +import { AddressInfoRow } from './AddressInfoRow'; + +export { AddressInfoRow }; diff --git a/src/components/CardAboutShelter/utils.ts b/src/components/CardAboutShelter/utils.ts index 58d00b67..46ffa4ab 100644 --- a/src/components/CardAboutShelter/utils.ts +++ b/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 };