@prezly/theme-kit-ui
Version:
UI components for Prezly themes
75 lines (74 loc) • 3.45 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Boilerplate = Boilerplate;
var _react = _interopRequireDefault(require("react"));
var _outline = require("@heroicons/react/24/outline");
var _tailwindMerge = require("tailwind-merge");
var _index = require("../Link/index.cjs");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function Boilerplate(_ref) {
var _intl$boilerplateTit;
var {
className,
companyInformation,
intl = {}
} = _ref;
var {
about,
phone,
email,
address,
website
} = companyInformation;
var hasContactInformation = Boolean(address || phone || email || website);
if (!about && !phone && !email && !address && !website) {
return null;
}
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _tailwindMerge.twMerge)('py-12 px-6 md:p-12 bg-gray-800', className)
}, /*#__PURE__*/_react.default.createElement("h2", {
className: "title-medium text-white mb-6"
}, (_intl$boilerplateTit = intl['boilerplate.title']) !== null && _intl$boilerplateTit !== void 0 ? _intl$boilerplateTit : 'About'), /*#__PURE__*/_react.default.createElement("div", {
className: "flex flex-col md:grid gap-12 md:grid-cols-[3fr_1fr]"
}, about && /*#__PURE__*/_react.default.createElement("div", {
className: "md:mb-12 text-white",
dangerouslySetInnerHTML: {
__html: about
}
}), hasContactInformation && /*#__PURE__*/_react.default.createElement("div", {
className: "flex flex-col w-full md:max-w-xs rounded border border-gray-700 h-max"
}, website && /*#__PURE__*/_react.default.createElement("div", {
className: "p-6 border-b border-gray-700 last:border-b-0 gap-4 flex items-center"
}, /*#__PURE__*/_react.default.createElement(_outline.GlobeAltIcon, {
className: "w-4 h-4 text-white shrink-0"
}), /*#__PURE__*/_react.default.createElement(_index.Link, {
className: "text-white hover:text-white hover:underline",
href: website,
icon: _outline.ArrowUpRightIcon,
iconPlacement: "right",
target: "_blank",
rel: "noopener noreferrer"
}, new URL(website).hostname)), phone && /*#__PURE__*/_react.default.createElement("div", {
className: "p-6 border-b border-gray-700 last:border-b-0 gap-4 flex items-center"
}, /*#__PURE__*/_react.default.createElement(_outline.DevicePhoneMobileIcon, {
className: "w-4 h-4 text-white shrink-0"
}), /*#__PURE__*/_react.default.createElement(_index.Link, {
className: "text-white hover:text-white hover:underline",
href: "tel:".concat(phone)
}, phone)), email && /*#__PURE__*/_react.default.createElement("div", {
className: "p-6 border-b border-gray-700 last:border-b-0 gap-4 flex items-center"
}, /*#__PURE__*/_react.default.createElement(_outline.EnvelopeIcon, {
className: "w-4 h-4 text-white shrink-0"
}), /*#__PURE__*/_react.default.createElement(_index.Link, {
className: "text-white hover:text-white hover:underline",
href: "mailto:".concat(email)
}, email)), address && /*#__PURE__*/_react.default.createElement("address", {
className: "p-6 border-b border-gray-700 last:border-b-0 gap-4 flex items-center not-italic"
}, /*#__PURE__*/_react.default.createElement(_outline.MapPinIcon, {
className: "w-4 h-4 text-white shrink-0"
}), /*#__PURE__*/_react.default.createElement("p", {
className: "label-large text-white"
}, address)))));
}