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

UI components for Prezly themes

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ContactCard = ContactCard;
var _react = _interopRequireDefault(require("react"));
var _outline = require("@heroicons/react/24/outline");
var _uploadcareImage = require("@prezly/uploadcare-image");
var _tailwindMerge = require("tailwind-merge");
var _icons = require("@/icons");
var _index = require("../Link/index.cjs");
var _utils = require("./utils.cjs");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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
  } = (0, _utils.getSocialHandles)(contact);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _tailwindMerge.twMerge)('flex p-6 border border-gray-200 flex-col gap-4 max-w-xl rounded', className)
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "flex items-center gap-4"
  }, avatar_image ? /*#__PURE__*/_react.default.createElement(_uploadcareImage.UploadcareImage, {
    className: "w-16 h-16 rounded",
    layout: "fixed",
    imageDetails: avatar_image
  }) : avatar_url && /*#__PURE__*/_react.default.createElement(_uploadcareImage.UploadcareImage, {
    className: "w-16 h-16 rounded",
    layout: "fixed",
    src: avatar_url
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: "flex flex-col gap-1"
  }, /*#__PURE__*/_react.default.createElement("h4", {
    className: "title-x-small"
  }, name), /*#__PURE__*/_react.default.createElement("p", {
    className: "label-large text-gray-600"
  }, subtitle))), /*#__PURE__*/_react.default.createElement("div", {
    className: "flex items-center flex-wrap gap-4"
  }, email && /*#__PURE__*/_react.default.createElement(_index.Link, {
    forceRefresh: true,
    href: "mailto:".concat(email),
    icon: _outline.EnvelopeIcon
  }, email), phone && /*#__PURE__*/_react.default.createElement(_index.Link, {
    forceRefresh: true,
    href: "tel:".concat(phone),
    icon: _outline.PhoneIcon
  }, phone), mobile && /*#__PURE__*/_react.default.createElement(_index.Link, {
    forceRefresh: true,
    href: "tel:".concat(mobile),
    icon: _outline.DevicePhoneMobileIcon
  }, mobile), facebook && /*#__PURE__*/_react.default.createElement(_index.Link, {
    forceRefresh: true,
    href: "https://facebook.com/".concat(facebook),
    icon: _icons.Icons.Facebook,
    target: "_blank",
    rel: "noopener noreferrer"
  }, facebook), twitter && /*#__PURE__*/_react.default.createElement(_index.Link, {
    forceRefresh: true,
    href: "https://x.com/".concat(twitter),
    icon: _icons.Icons.Twitter,
    target: "_blank",
    rel: "noopener noreferrer"
  }, "@", twitter)));
}