From db5dc1dec08b6be845db83ccb05eb638005aed50 Mon Sep 17 00:00:00 2001 From: Armando Jr Date: Sun, 19 May 2024 11:41:13 -0300 Subject: [PATCH 1/2] provided initial implementation --- .../CardAboutShelter/CardAboutShelter.tsx | 50 +++++++++++++++++-- src/components/CardAboutShelter/utils.ts | 5 +- 2 files changed, 51 insertions(+), 4 deletions(-) diff --git a/src/components/CardAboutShelter/CardAboutShelter.tsx b/src/components/CardAboutShelter/CardAboutShelter.tsx index 34525112..9532422d 100644 --- a/src/components/CardAboutShelter/CardAboutShelter.tsx +++ b/src/components/CardAboutShelter/CardAboutShelter.tsx @@ -1,5 +1,6 @@ import { Home, + Map, UsersRound, HandHeart, PawPrint, @@ -12,9 +13,53 @@ import { import { Card } from '../ui/card'; import { ICardAboutShelter } from './types'; import { InfoRow } from './components'; -import { checkAndFormatAddress } from './utils'; +import { checkAndFormatAddress, getGoogleMapsUrlTo } from './utils'; import { ShelterCategory } from '@/hooks/useShelter/types'; import { Fragment } from 'react/jsx-runtime'; +import React from 'react'; +import { cn } from '@/lib/utils'; + +const AddressInfoRow = (props: { shelter: ICardAboutShelter['shelter'] }) => { + const { shelter } = props; + + 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', + })} +
+ + + {formatAddress} + + +
+
+
+ {React.cloneElement( as any, { + className: 'min-w-5 min-h-5 w-5 h-5 stroke-muted-foreground', + })} +
+ + + Ver endereço no mapa + + +
+
+ + ); +}; const CardAboutShelter = (props: ICardAboutShelter) => { const { shelter } = props; @@ -22,13 +67,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/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 }; From fd77b74f8b64a5e23ad75fc15016e33bac36ec58 Mon Sep 17 00:00:00 2001 From: Armando Jr Date: Sun, 19 May 2024 12:00:30 -0300 Subject: [PATCH 2/2] refactor to move the AddressInfoRow to another file --- .../CardAboutShelter/CardAboutShelter.tsx | 48 +----------------- .../AddressInfoRow/AddressInfoRow.tsx | 49 +++++++++++++++++++ .../components/AddressInfoRow/index.ts | 3 ++ 3 files changed, 53 insertions(+), 47 deletions(-) create mode 100644 src/components/CardAboutShelter/components/AddressInfoRow/AddressInfoRow.tsx create mode 100644 src/components/CardAboutShelter/components/AddressInfoRow/index.ts diff --git a/src/components/CardAboutShelter/CardAboutShelter.tsx b/src/components/CardAboutShelter/CardAboutShelter.tsx index 9532422d..5c77932a 100644 --- a/src/components/CardAboutShelter/CardAboutShelter.tsx +++ b/src/components/CardAboutShelter/CardAboutShelter.tsx @@ -1,6 +1,4 @@ import { - Home, - Map, UsersRound, HandHeart, PawPrint, @@ -13,53 +11,9 @@ import { import { Card } from '../ui/card'; import { ICardAboutShelter } from './types'; import { InfoRow } from './components'; -import { checkAndFormatAddress, getGoogleMapsUrlTo } from './utils'; import { ShelterCategory } from '@/hooks/useShelter/types'; import { Fragment } from 'react/jsx-runtime'; -import React from 'react'; -import { cn } from '@/lib/utils'; - -const AddressInfoRow = (props: { shelter: ICardAboutShelter['shelter'] }) => { - const { shelter } = props; - - 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', - })} - -
- - ); -}; +import { AddressInfoRow } from './components/AddressInfoRow'; const CardAboutShelter = (props: ICardAboutShelter) => { const { shelter } = props; 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 };