@atlaskit/profilecard
Version:
A React component to display a card with user information.
64 lines • 2.54 kB
JavaScript
/* main.tsx generated by @compiled/babel-plugin v0.36.1 */
import "./main.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useCallback } from 'react';
import { useAnalyticsEvents } from '@atlaskit/analytics-next';
import { LinkItem } from '@atlaskit/menu';
import { Box, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
import { getContainerProperties } from '@atlaskit/teams-public';
import { fireEvent } from '../../../util/analytics';
var styles = {
containerWrapperStyles: "_1e0c1txw _4cvr1h6o",
containerIconStyles: "_2rkoiti9 _4t3i1tcg _1bsb1tcg",
containerTypeIconButtonStyles: "_18u01wug _4t3i7vkz _1bsb7vkz"
};
export var TeamConnections = function TeamConnections(_ref) {
var containerType = _ref.containerType,
title = _ref.title,
containerIcon = _ref.containerIcon,
link = _ref.link;
var _getContainerProperti = getContainerProperties(containerType, 'medium'),
description = _getContainerProperti.description,
icon = _getContainerProperti.icon,
containerTypeText = _getContainerProperti.containerTypeText;
var _useAnalyticsEvents = useAnalyticsEvents(),
createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
var onClick = useCallback(function () {
fireEvent(createAnalyticsEvent, {
action: 'clicked',
actionSubject: 'teamConnectionItem',
actionSubjectId: 'teamProfileCard',
attributes: {
container: containerType
}
});
}, [containerType, createAnalyticsEvent]);
return /*#__PURE__*/React.createElement(LinkItem, {
href: link,
onClick: onClick
}, /*#__PURE__*/React.createElement(Inline, {
space: "space.100",
xcss: styles.containerWrapperStyles
}, /*#__PURE__*/React.createElement(Box, {
as: "img",
src: containerIcon,
alt: "",
testId: "linked-container-icon",
xcss: styles.containerIconStyles
}), /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Text, {
maxLines: 1,
color: "color.text"
}, title), /*#__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))), /*#__PURE__*/React.createElement(Box, {
backgroundColor: 'color.background.neutral.subtle',
xcss: styles.containerTypeIconButtonStyles,
testId: "container-type-icon"
}, icon)));
};