@servicetitan/assist-ui
Version:
ServiceTitan Atlas UI Components
77 lines (76 loc) • 3.13 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Card, Flex, Text } from '@servicetitan/anvil2';
import { MarkdownText } from '../markdown-text';
export const NotificationCard = ({ title, message, timestamp, onClick, unread = false })=>{
return /*#__PURE__*/ _jsx(Card, {
onClick: onClick,
style: {
cursor: 'pointer'
},
children: /*#__PURE__*/ _jsxs(Flex, {
direction: "column",
gap: 2,
style: {
width: '100%'
},
children: [
/*#__PURE__*/ _jsxs(Flex, {
alignItems: "center",
justifyContent: "space-between",
children: [
/*#__PURE__*/ _jsx(Text, {
size: "medium",
style: {
color: '#0067E4',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
width: '75%'
},
children: unread ? /*#__PURE__*/ _jsx("b", {
children: title
}) : title
}),
/*#__PURE__*/ _jsx(Flex, {
alignItems: "center",
gap: 1,
children: /*#__PURE__*/ _jsxs(Text, {
size: "small",
style: {
color: '#6B6B6B'
},
children: [
timestamp,
unread && /*#__PURE__*/ _jsx("span", {
style: {
display: 'inline-block',
width: 12,
height: 12,
borderRadius: '50%',
background: '#E23D18',
marginLeft: 8
}
})
]
})
})
]
}),
/*#__PURE__*/ _jsx(Text, {
size: "small",
style: {
color: '#6B6B6B'
},
children: unread ? /*#__PURE__*/ _jsx("b", {
children: /*#__PURE__*/ _jsx(MarkdownText, {
text: message
})
}) : /*#__PURE__*/ _jsx(MarkdownText, {
text: message
})
})
]
})
});
};
//# sourceMappingURL=notification-card.js.map