phx-react
Version:
PHX REACT
98 lines • 5.28 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MobilePreview = exports.ENotificationType = void 0;
const tslib_1 = require("tslib");
const image_1 = tslib_1.__importDefault(require("next/image"));
const react_1 = tslib_1.__importDefault(require("react"));
const icons_1 = require("../../../assets/icons");
const screens_1 = require("../../../assets/screens");
const Box_1 = require("../../Box");
const Iframe_1 = require("../../Iframe");
const TextV2_1 = require("../../TextV2");
var ENotificationType;
(function (ENotificationType) {
ENotificationType["IN_APP"] = "in_app";
ENotificationType["EMAIL"] = "email";
})(ENotificationType || (exports.ENotificationType = ENotificationType = {}));
const getScaledPreviewContent = (title, html) => {
if (!html && !title) {
return '';
}
return `
<div>
${title ? `<h3>${title}</h3>` : ''}
<div>${html || ''}</div>
</div>
`;
};
const MobilePreview = ({ content, description, isEvent = false, title, type = 'email', }) => {
const isApp = type === 'in_app';
const getImageUrl = () => {
switch (type) {
case 'in_app':
return icons_1.PHXIcons.AppParentIcon;
case 'email':
return icons_1.PHXIcons.EmailIcon;
default:
return icons_1.PHXIcons.AppParentIcon;
}
};
const getImageDetailUrl = () => {
switch (type) {
case 'in_app':
return isEvent ? screens_1.PHXScreens.AppDetailEvent : screens_1.PHXScreens.NotiDetail;
case 'email':
return screens_1.PHXScreens.EmailDetail;
default:
return screens_1.PHXScreens.EmailDetail;
}
};
const getDetailWrapperClass = () => {
const baseClass = 'absolute flex flex-col bg-white/90 p-3';
if (isApp) {
const positionClass = 'left-3 right-3 sm:left-4 sm:right-4';
if (isEvent) {
return `${baseClass} ${positionClass} bottom-0 h-4/5 rounded-t-2xl`;
}
return `${baseClass} ${positionClass} bottom-4 max-h-[69%] min-h-[16%] rounded-2xl`;
}
const positionClass = 'bottom-4 left-4 right-4 sm:left-6 sm:right-6 rounded-xl';
if (isEvent) {
return `${baseClass} ${positionClass} h-[72%] mx-1`;
}
return `${baseClass} ${positionClass} h-[72%] mx-1`;
};
/**
* handle height of iframe
* @returns
*/
const getHeightIframe = () => {
if (isApp && isEvent) {
return 'medium';
}
if (isApp) {
return 'small';
}
return 'medium';
};
return (react_1.default.createElement("div", { className: 'flex flex-col gap-6 px-4 md:px-8 lg:flex-row lg:gap-12 lg:px-12' },
react_1.default.createElement("div", { className: 'relative w-full lg:w-1/2' },
react_1.default.createElement(image_1.default, { alt: 'ImagePhone', className: 'h-auto w-full rounded-xl', height: 100, quality: 100, src: screens_1.PHXScreens.MobileScreen, width: 100 }),
react_1.default.createElement("div", { className: 'absolute bottom-4 left-3 right-3 flex flex-col rounded-2xl bg-white/90 p-3 sm:left-4 sm:right-4' },
react_1.default.createElement("div", { className: 'flex min-w-0 items-center gap-2' },
react_1.default.createElement(image_1.default, { alt: 'ParentApp', className: 'h-7 w-7 shrink-0 rounded-md object-cover sm:h-8 sm:w-8', height: 28, src: getImageUrl(), width: 28 }),
react_1.default.createElement("div", { className: 'min-w-0 flex-1 text-[10px]' },
react_1.default.createElement("div", { className: 'flex min-w-0 items-center gap-2' },
react_1.default.createElement("p", { className: 'min-w-0 flex-1 truncate font-semibold leading-3 sm:leading-4' }, title || 'Tiêu đề'),
react_1.default.createElement("p", { className: 'shrink-0 text-[10px] text-gray-500' }, "9:30 AM")),
react_1.default.createElement("p", { className: 'line-clamp-3 leading-3 text-gray-900 sm:line-clamp-4 sm:leading-4' }, description || 'Mô tả ngắn'))))),
react_1.default.createElement("div", { className: 'relative w-full lg:w-1/2' },
react_1.default.createElement(image_1.default, { alt: 'ImagePhoneDetail', className: 'h-auto w-full rounded-xl', height: 100, quality: 100, src: getImageDetailUrl(), width: 100 }),
react_1.default.createElement("div", { className: getDetailWrapperClass() },
react_1.default.createElement("div", { className: 'h-full' },
isApp && !isEvent && (react_1.default.createElement(Box_1.PHXBox, { pb: 'snappy' },
react_1.default.createElement(TextV2_1.PHXTextV2, { color: 'primary', size: 'micro', weight: 'semibold' }, "Chi ti\u1EBFt th\u00F4ng b\u00E1o"))),
react_1.default.createElement(Iframe_1.PHXIframe, { height: getHeightIframe(), isMobile: true, srcDoc: getScaledPreviewContent(title, content) }))))));
};
exports.MobilePreview = MobilePreview;
//# sourceMappingURL=mobile-preview.js.map