phx-react
Version:
PHX REACT
56 lines • 5.04 kB
JavaScript
import React from 'react';
export default function PHXActivityHistory({ loading = false, title = 'Lịch sử hoạt động', data = [], generateChildren, bgColor = 'bg-white', emptyText = 'Chưa có lịch sử hoạt động.', enableHTML = false, }) {
const childrenDefault = (history) => {
if (enableHTML) {
return (React.createElement("div", { className: 'flex w-full justify-between text-xs' },
React.createElement("div", { className: 'pr-2 leading-5', dangerouslySetInnerHTML: { __html: history.description || '' } }),
React.createElement("span", { className: 'shrink-0 ' }, history.created_at)));
}
return (React.createElement(React.Fragment, null,
React.createElement("span", { className: 'text-xs text-gray-600 font-[450]' }, history.description),
React.createElement("p", { className: 'text-xs text-gray-600 font-[450]' }, history.created_at)));
};
const renderChildren = (history) => {
return generateChildren ? generateChildren(history) : childrenDefault(history);
};
return (React.createElement("div", { className: ' px-3 relative w-full overflow-hidden' },
React.createElement("p", { className: 'text-sm font-[650]' }, title),
loading ? (React.createElement("div", { className: 'space-y-4 mt-4' },
React.createElement("div", { className: 'flex animate-pulse space-x-4' },
React.createElement("div", { className: 'flex-1 space-y-6 py-1' },
React.createElement("div", { className: 'h-2 rounded bg-gray-200' }),
React.createElement("div", { className: 'space-y-3' },
React.createElement("div", { className: 'grid grid-cols-3 gap-4' },
React.createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
React.createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
React.createElement("div", { className: 'h-2 rounded bg-gray-200' })))),
React.createElement("div", { className: 'flex animate-pulse space-x-4' },
React.createElement("div", { className: 'flex-1 space-y-6 py-1' },
React.createElement("div", { className: 'h-2 rounded bg-gray-200' }),
React.createElement("div", { className: 'space-y-3' },
React.createElement("div", { className: 'grid grid-cols-3 gap-4' },
React.createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
React.createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
React.createElement("div", { className: 'h-2 rounded bg-gray-200' })))),
React.createElement("div", { className: 'flex animate-pulse space-x-4' },
React.createElement("div", { className: 'flex-1 space-y-6 py-1' },
React.createElement("div", { className: 'h-2 rounded bg-gray-200' }),
React.createElement("div", { className: 'space-y-3' },
React.createElement("div", { className: 'grid grid-cols-3 gap-4' },
React.createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
React.createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
React.createElement("div", { className: 'h-2 rounded bg-gray-200' })))))) : (React.createElement(React.Fragment, null, data.length > 0 ? (React.createElement(React.Fragment, null,
React.createElement("div", { className: ' absolute bg-[#CCCCCC] top-[1.3rem] left-[1.17rem] h-full w-[0.5px]' }),
React.createElement("div", { className: ` absolute h-[80px] w-4 left-[1rem] -bottom-20 ${bgColor}` }),
data.map((item, index) => {
return (React.createElement("div", { key: index, className: 'w-full pl-8 pt-4' },
React.createElement("p", { className: 'text-[12px] font-normal text-[#616161] pb-3' }, item.date),
React.createElement("div", { className: ' space-y-5 relative' }, item.childs.map((history, historyIndex) => {
return (React.createElement("div", { key: historyIndex, className: 'w-full items-start flex justify-between gap-x-6 relative' },
React.createElement("div", { className: ' absolute -left-[2.05rem] ' },
React.createElement("img", { className: 'w-[16px] h-[16px]', src: 'https://sisv2-cdn.phx-smartschool.com/store/product/4-23-2025/84089cd5-7468-4093-a7df-65123cb4704a-Frame-354557.png' })),
renderChildren(history)));
}))));
}))) : (React.createElement("p", { className: 'text-xs text-gray-600 font-normal mt-2' }, emptyText))))));
}
//# sourceMappingURL=ActivityHistory.js.map