@atlaskit/profilecard
Version:
A React component to display a card with user information.
67 lines • 2.26 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';
const styles = {
containerWrapperStyles: "_1e0c1txw _4cvr1h6o",
containerIconStyles: "_2rkoiti9 _4t3i1tcg _1bsb1tcg",
containerTypeIconButtonStyles: "_18u01wug _4t3i7vkz _1bsb7vkz"
};
export const TeamConnections = ({
containerType,
title,
containerIcon,
link
}) => {
const {
description,
icon,
containerTypeText
} = getContainerProperties(containerType, 'medium');
const {
createAnalyticsEvent
} = useAnalyticsEvents();
const onClick = useCallback(() => {
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)));
};