@atlaskit/profilecard
Version:
A React component to display a card with user information.
64 lines • 2.02 kB
JavaScript
/* main.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./main.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useCallback } from 'react';
import { LinkItem } from '@atlaskit/menu';
import { Box, Inline, Text } from '@atlaskit/primitives/compiled';
import { useAnalyticsEvents } from '@atlaskit/teams-app-internal-analytics';
import { ContainerIcon, getContainerProperties } from '@atlaskit/teams-public';
const styles = {
containerTypeIconButtonStyles: "_18u01wug _4t3i7vkz _1bsb7vkz"
};
export const TeamConnections = ({
containerType,
title,
containerIcon,
link
}) => {
const {
description,
icon,
containerTypeText
} = getContainerProperties({
containerType,
iconSize: 'medium',
isDisplayedOnProfileCard: true
});
const {
fireEvent
} = useAnalyticsEvents();
const onClick = useCallback(() => {
fireEvent('ui.teamConnectionItem.clicked.teamProfileCard', {
container: containerType
});
}, [containerType, fireEvent]);
return /*#__PURE__*/React.createElement(LinkItem, {
href: link,
onClick: onClick,
target: "_blank",
description: /*#__PURE__*/React.createElement(Inline, {
space: "space.050"
}, /*#__PURE__*/React.createElement(Text, {
size: "small",
color: "color.text.subtlest"
}, description), /*#__PURE__*/React.createElement(Text, {
size: "small",
color: "color.text.subtlest"
}, containerTypeText)),
iconBefore: /*#__PURE__*/React.createElement(ContainerIcon, {
containerType: containerType,
title: title,
containerIcon: containerIcon,
size: "small"
}),
iconAfter: /*#__PURE__*/React.createElement(Box, {
backgroundColor: 'color.background.neutral.subtle',
xcss: styles.containerTypeIconButtonStyles,
testId: "container-type-icon"
}, icon),
testId: "team-connection-item"
}, /*#__PURE__*/React.createElement(Text, {
maxLines: 1,
color: "color.text"
}, title));
};