fido-node.github.io/components/personal-card/elements/ContactsButtons.tsx

44 lines
1.2 KiB
TypeScript
Raw Normal View History

2021-04-28 22:31:42 +03:00
import * as React from 'react';
import '@fortawesome/fontawesome-svg-core';
import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
import {
faTelegram,
faTwitter,
faGithub,
faLinkedin,
faTwitch
} from '@fortawesome/free-brands-svg-icons';
import { IconDefinition, IconName, IconPrefix } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Contact, contactToLink, ContactType } from '../../../src/contacts/contacts';
type Props = {
contacts: Contact[];
};
const typeToIcon: { [key in ContactType]: [IconDefinition, string?] } = {
tg: [faTelegram],
mail: [faEnvelope],
twitter: [faTwitter],
github: [faGithub],
linkedin: [faLinkedin],
twitch: [faTwitch]
};
const ContactComp = ({ id, type }: Contact) => {
const iconDescr = typeToIcon[type];
return (
<a
className={'text-5xl p-3 text-gray-600' + ' ' + iconDescr[1]}
href={contactToLink({ id, type })}
target="_blank">
<FontAwesomeIcon key={type} icon={iconDescr[0]} />
</a>
);
};
export default ({ contacts }: Props) => (
<div className={'text-center'}>{contacts.map((c) => ContactComp(c))}</div>
);