@prezly/theme-kit-ui/build/components/ContactCard/ContactCard.mjs

UI components for Prezly themes

import React from "react";
import { DevicePhoneMobileIcon, EnvelopeIcon, PhoneIcon } from '@heroicons/react/24/outline';
import { UploadcareImage } from '@prezly/uploadcare-image';
import { twMerge } from 'tailwind-merge';
import { Icons } from '@/icons';
import { Link } from "../Link/index.mjs";
import { getSocialHandles } from "./utils.mjs";
export function ContactCard(_ref) {
  var {
    contact,
    className
  } = _ref;
  var {
    avatar_image,
    avatar_url,
    description,
    company,
    name,
    email,
    phone,
    mobile
  } = contact;
  var subtitle = description && company ? "".concat(description, ", ").concat(company) : description;
  var {
    facebook,
    twitter
  } = getSocialHandles(contact);
  return /*#__PURE__*/React.createElement("div", {
    className: twMerge('flex p-6 border border-gray-200 flex-col gap-4 max-w-xl rounded', className)
  }, /*#__PURE__*/React.createElement("div", {
    className: "flex items-center gap-4"
  }, avatar_image ? /*#__PURE__*/React.createElement(UploadcareImage, {
    className: "w-16 h-16 rounded",
    layout: "fixed",
    imageDetails: avatar_image
  }) : avatar_url && /*#__PURE__*/React.createElement(UploadcareImage, {
    className: "w-16 h-16 rounded",
    layout: "fixed",
    src: avatar_url
  }), /*#__PURE__*/React.createElement("div", {
    className: "flex flex-col gap-1"
  }, /*#__PURE__*/React.createElement("h4", {
    className: "title-x-small"
  }, name), /*#__PURE__*/React.createElement("p", {
    className: "label-large text-gray-600"
  }, subtitle))), /*#__PURE__*/React.createElement("div", {
    className: "flex items-center flex-wrap gap-4"
  }, email && /*#__PURE__*/React.createElement(Link, {
    forceRefresh: true,
    href: "mailto:".concat(email),
    icon: EnvelopeIcon
  }, email), phone && /*#__PURE__*/React.createElement(Link, {
    forceRefresh: true,
    href: "tel:".concat(phone),
    icon: PhoneIcon
  }, phone), mobile && /*#__PURE__*/React.createElement(Link, {
    forceRefresh: true,
    href: "tel:".concat(mobile),
    icon: DevicePhoneMobileIcon
  }, mobile), facebook && /*#__PURE__*/React.createElement(Link, {
    forceRefresh: true,
    href: "https://facebook.com/".concat(facebook),
    icon: Icons.Facebook,
    target: "_blank",
    rel: "noopener noreferrer"
  }, facebook), twitter && /*#__PURE__*/React.createElement(Link, {
    forceRefresh: true,
    href: "https://x.com/".concat(twitter),
    icon: Icons.Twitter,
    target: "_blank",
    rel: "noopener noreferrer"
  }, "@", twitter)));
}