@prezly/theme-kit-ui
Version:
UI components for Prezly themes
70 lines • 3.14 kB
JavaScript
import React from "react";
import { ArrowUpRightIcon, DevicePhoneMobileIcon, EnvelopeIcon, GlobeAltIcon, MapPinIcon } from '@heroicons/react/24/outline';
import { twMerge } from 'tailwind-merge';
import { Link } from "../Link/index.mjs";
export 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.createElement("div", {
className: twMerge('py-12 px-6 md:p-12 bg-gray-800', className)
}, /*#__PURE__*/React.createElement("h2", {
className: "title-medium text-white mb-6"
}, (_intl$boilerplateTit = intl['boilerplate.title']) !== null && _intl$boilerplateTit !== void 0 ? _intl$boilerplateTit : 'About'), /*#__PURE__*/React.createElement("div", {
className: "flex flex-col md:grid gap-12 md:grid-cols-[3fr_1fr]"
}, about && /*#__PURE__*/React.createElement("div", {
className: "md:mb-12 text-white"
// biome-ignore lint/security/noDangerouslySetInnerHtml: <This is expected>
,
dangerouslySetInnerHTML: {
__html: about
}
}), hasContactInformation && /*#__PURE__*/React.createElement("div", {
className: "flex flex-col w-full md:max-w-xs rounded border border-gray-700 h-max"
}, website && /*#__PURE__*/React.createElement("div", {
className: "p-6 border-b border-gray-700 last:border-b-0 gap-4 flex items-center"
}, /*#__PURE__*/React.createElement(GlobeAltIcon, {
className: "w-4 h-4 text-white shrink-0"
}), /*#__PURE__*/React.createElement(Link, {
className: "text-white hover:text-white hover:underline",
href: website,
icon: ArrowUpRightIcon,
iconPlacement: "right",
target: "_blank",
rel: "noopener noreferrer"
}, new URL(website).hostname)), phone && /*#__PURE__*/React.createElement("div", {
className: "p-6 border-b border-gray-700 last:border-b-0 gap-4 flex items-center"
}, /*#__PURE__*/React.createElement(DevicePhoneMobileIcon, {
className: "w-4 h-4 text-white shrink-0"
}), /*#__PURE__*/React.createElement(Link, {
className: "text-white hover:text-white hover:underline",
href: "tel:".concat(phone)
}, phone)), email && /*#__PURE__*/React.createElement("div", {
className: "p-6 border-b border-gray-700 last:border-b-0 gap-4 flex items-center"
}, /*#__PURE__*/React.createElement(EnvelopeIcon, {
className: "w-4 h-4 text-white shrink-0"
}), /*#__PURE__*/React.createElement(Link, {
className: "text-white hover:text-white hover:underline",
href: "mailto:".concat(email)
}, email)), address && /*#__PURE__*/React.createElement("address", {
className: "p-6 border-b border-gray-700 last:border-b-0 gap-4 flex items-center not-italic"
}, /*#__PURE__*/React.createElement(MapPinIcon, {
className: "w-4 h-4 text-white shrink-0"
}), /*#__PURE__*/React.createElement("p", {
className: "label-large text-white"
}, address)))));
}