update previews, make links clickable

This commit is contained in:
Amruth Pillai
2020-03-27 21:10:48 +05:30
parent 6eccbd5373
commit bca51870ef
6 changed files with 52 additions and 22 deletions

View File

@ -33,13 +33,15 @@ const Onyx = () => {
</div>
);
const ContactItem = ({ icon, value }) =>
const ContactItem = ({ icon, value, link = '#' }) =>
value && (
<div className="flex items-center my-3">
<span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
{icon}
</span>
<span className="font-medium break-all">{value}</span>
<a href={link}>
<span className="font-medium break-all">{value}</span>
</a>
</div>
);
@ -230,9 +232,17 @@ const Onyx = () => {
</div>
<div className="col-span-1 text-xs">
<ContactItem icon="phone" value={data.profile.phone} />
<ContactItem icon="language" value={data.profile.website} />
<ContactItem icon="alternate_email" value={data.profile.email} />
<ContactItem icon="phone" value={data.profile.phone} link={`tel:${data.profile.phone}`} />
<ContactItem
icon="language"
value={data.profile.website}
link={`http://${data.profile.website}`}
/>
<ContactItem
icon="alternate_email"
value={data.profile.email}
link={`mailto:${data.profile.email}`}
/>
</div>
</div>