44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
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>
|
|
);
|