phx-react
Version:
PHX REACT
93 lines • 4.68 kB
JavaScript
import Image from 'next/image';
import React from 'react';
import { PHXIcons } from '../../../assets/icons';
import { PHXScreens } from '../../../assets/screens';
import { PHXBox } from '../../Box';
import { PHXIframe } from '../../Iframe';
import { PHXTextV2 } from '../../TextV2';
export var ENotificationType;
(function (ENotificationType) {
ENotificationType["IN_APP"] = "in_app";
ENotificationType["EMAIL"] = "email";
})(ENotificationType || (ENotificationType = {}));
const getScaledPreviewContent = (title, html) => {
if (!html && !title) {
return '';
}
return `
<div>
${title ? `<h3>${title}</h3>` : ''}
<div>${html || ''}</div>
</div>
`;
};
export const MobilePreview = ({ content, description, isEvent = false, title, type = 'email', }) => {
const isApp = type === 'in_app';
const getImageUrl = () => {
switch (type) {
case 'in_app':
return PHXIcons.AppParentIcon;
case 'email':
return PHXIcons.EmailIcon;
default:
return PHXIcons.AppParentIcon;
}
};
const getImageDetailUrl = () => {
switch (type) {
case 'in_app':
return isEvent ? PHXScreens.AppDetailEvent : PHXScreens.NotiDetail;
case 'email':
return PHXScreens.EmailDetail;
default:
return 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.createElement("div", { className: 'flex flex-col gap-6 px-4 md:px-8 lg:flex-row lg:gap-12 lg:px-12' },
React.createElement("div", { className: 'relative w-full lg:w-1/2' },
React.createElement(Image, { alt: 'ImagePhone', className: 'h-auto w-full rounded-xl', height: 100, quality: 100, src: PHXScreens.MobileScreen, width: 100 }),
React.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.createElement("div", { className: 'flex min-w-0 items-center gap-2' },
React.createElement(Image, { 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.createElement("div", { className: 'min-w-0 flex-1 text-[10px]' },
React.createElement("div", { className: 'flex min-w-0 items-center gap-2' },
React.createElement("p", { className: 'min-w-0 flex-1 truncate font-semibold leading-3 sm:leading-4' }, title || 'Tiêu đề'),
React.createElement("p", { className: 'shrink-0 text-[10px] text-gray-500' }, "9:30 AM")),
React.createElement("p", { className: 'line-clamp-3 leading-3 text-gray-900 sm:line-clamp-4 sm:leading-4' }, description || 'Mô tả ngắn'))))),
React.createElement("div", { className: 'relative w-full lg:w-1/2' },
React.createElement(Image, { alt: 'ImagePhoneDetail', className: 'h-auto w-full rounded-xl', height: 100, quality: 100, src: getImageDetailUrl(), width: 100 }),
React.createElement("div", { className: getDetailWrapperClass() },
React.createElement("div", { className: 'h-full' },
isApp && !isEvent && (React.createElement(PHXBox, { pb: 'snappy' },
React.createElement(PHXTextV2, { color: 'primary', size: 'micro', weight: 'semibold' }, "Chi ti\u1EBFt th\u00F4ng b\u00E1o"))),
React.createElement(PHXIframe, { height: getHeightIframe(), isMobile: true, srcDoc: getScaledPreviewContent(title, content) }))))));
};
//# sourceMappingURL=mobile-preview.js.map