Skip to content

Commit

Permalink
Contact card links and empty infos (#296)
Browse files Browse the repository at this point in the history
  • Loading branch information
Samuel-Therrien-Beslogic authored Nov 26, 2024
1 parent f5a5df2 commit 2de3a53
Showing 1 changed file with 28 additions and 12 deletions.
40 changes: 28 additions & 12 deletions canopeum_frontend/src/components/social/ContactCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@ type Props = {
const ContactCard = ({ contact, viewMode, onEdit }: Props) => {
const [isModalOpen, setIsModalOpen] = useState(false)

const googleMapQueryURL = contact.address
? `https://www.google.com/maps/search/?api=1&query=${encodeURI(contact.address)}`
: ''

const renderContactCard = () => (
<div className='card rounded'>
<div className='card-body'>
Expand All @@ -34,18 +38,30 @@ const ContactCard = ({ contact, viewMode, onEdit }: Props) => {
)}
</div>
<div className='info-section d-flex flex-column'>
<div className='card-text adress d-flex align-items-center pb-3 gap-2'>
<span className='material-symbols-outlined fs-4'>home_work</span>
<p className='mb-0'>{contact.address}</p>
</div>
<div className='email d-flex align-items-center pb-3 gap-2'>
<span className='material-symbols-outlined fs-4'>mail</span>
<p className='mb-0'>{contact.email}</p>
</div>
<div className='phone d-flex align-items-center pb-3 gap-2'>
<span className='material-symbols-outlined fs-4'>perm_phone_msg</span>
<p className='mb-0'>{contact.phone}</p>
</div>
{contact.address && (
<div className='card-text adress d-flex align-items-center pb-3 gap-2'>
<span className='material-symbols-outlined fs-4'>home_work</span>
<Link
rel='noopener noreferrer'
target='_blank'
to={googleMapQueryURL}
>
{contact.address}
</Link>
</div>
)}
{contact.email && (
<div className='email d-flex align-items-center pb-3 gap-2'>
<span className='material-symbols-outlined fs-4'>mail</span>
<Link to={`mailto:${contact.email}`}>{contact.email}</Link>
</div>
)}
{contact.phone && (
<div className='phone d-flex align-items-center pb-3 gap-2'>
<span className='material-symbols-outlined fs-4'>perm_phone_msg</span>
<Link to={`tel:${contact.phone}`}>{contact.phone}</Link>
</div>
)}
</div>
<div className='social-icons d-flex flex-row-reverse pt-3'>
{contact.linkedinLink && (
Expand Down

0 comments on commit 2de3a53

Please sign in to comment.