nexpi-ui/lib/Contactbox.js

An elegant and minimalist Next.js 14 component library

import { FaFacebook, FaInstagram, FaTwitter, FaGithub, FaLinkedin, FaMobileAlt, FaMailBulk } from 'react-icons/fa';
import Typography from './Typography';
import Link from 'next/link';
import styles from './styles/Contactbox.module.css';
import React from 'react';
var getIcon = function (platform) {
    switch (platform) {
        case 'Facebook':
            return React.createElement(FaFacebook, { className: styles.contactbox, color: 'var(--nxp-primary-color)', fontSize: '32px' });
        case 'Instagram':
            return React.createElement(FaInstagram, { className: styles.contactbox, color: 'var(--nxp-primary-color)', fontSize: '32px' });
        case 'Twitter':
            return React.createElement(FaTwitter, { className: styles.contactbox, color: 'var(--nxp-primary-color)', fontSize: '32px' });
        case 'Github':
            return React.createElement(FaGithub, { className: styles.contactbox, color: 'var(--nxp-primary-color)', fontSize: '32px' });
        case 'Linkedin':
            return React.createElement(FaLinkedin, { className: styles.contactbox, color: 'var(--nxp-primary-color)', fontSize: '32px' });
        default:
            return React.createElement(FaFacebook, { className: styles.contactbox, color: 'var(--nxp-primary-color)', fontSize: '32px' });
    }
};
var Contactbox = function (_a) {
    var contacts = _a.contacts, phone = _a.phone, email = _a.email;
    return (React.createElement("div", { style: { padding: '32px' } },
        contacts.map(function (contact, index) {
            return (React.createElement("div", { key: index, style: { display: 'flex', flexDirection: 'row' } },
                getIcon(contact.platform),
                React.createElement(Link, { href: contact.link, style: { textDecoration: 'none', color: 'var(--nxp-background-color)', margin: '0.8rem', marginLeft: '3rem' } },
                    React.createElement("li", { style: { listStyle: 'none', color: 'var(--nxp-primary-color)', fontSize: '14px' } }, contact.platform))));
        }),
        phone ?
            React.createElement("div", { style: { display: 'flex', flexDirection: 'row' } },
                React.createElement(FaMobileAlt, { className: styles.contactbox, color: 'var(--nxp-primary-color)', fontSize: '32px' }),
                React.createElement(Typography, { variant: 'light', style: { margin: '0.8rem', marginLeft: '3rem', color: 'var(--nxp-primary-color)', fontSize: '14px' } }, phone)) : null,
        email ?
            React.createElement("div", { style: { display: 'flex', flexDirection: 'row' } },
                React.createElement(FaMailBulk, { className: styles.contactbox, color: 'var(--nxp-primary-color)', fontSize: '32px' }),
                React.createElement("div", { style: { overflow: 'auto' } },
                    React.createElement(Typography, { variant: 'light', style: { margin: '0.8rem', marginLeft: '3rem', color: 'var(--nxp-primary-color)', fontSize: '14px' } }, email))) : null));
};
export default Contactbox;
//# sourceMappingURL=Contactbox.js.map