@antv/dumi-theme-antv
Version:
AntV website theme based on dumi2.
80 lines • 3.65 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
import { Popover } from 'antd';
import React from 'react';
import styles from "./card.module.less";
import { BarChartOutlined, QuestionCircleOutlined } from "@ant-design/icons";
import { AIMode, AIModeMeta, COLORS } from "../../constant";
import { FormattedMessage, useLocale } from 'dumi';
export var Card = function Card(_ref) {
var _AIModeMeta$tag;
var item = _ref.item,
index = _ref.index,
onClick = _ref.onClick;
var _item$query = item.query,
query = _item$query === void 0 ? {} : _item$query,
_item$description = item.description,
description = _item$description === void 0 ? {} : _item$description,
_item$imageUrls = item.imageUrls,
imageUrls = _item$imageUrls === void 0 ? [] : _item$imageUrls,
tag = item.tag;
var style = COLORS[index];
var locale = useLocale();
var lang = locale.id === 'zh' ? 'zh' : 'en';
var handleClick = function handleClick(e) {
e.stopPropagation();
onClick === null || onClick === void 0 || onClick();
};
var popoverContent = /*#__PURE__*/React.createElement("div", {
className: styles.popoverContent
}, /*#__PURE__*/React.createElement("div", {
className: styles.popoverItem
}, /*#__PURE__*/React.createElement("div", {
className: styles.popoverLabel
}, /*#__PURE__*/React.createElement(FormattedMessage, {
id: "ai.recommend.card.caseName"
})), /*#__PURE__*/React.createElement("div", {
className: styles.popoverValue
}, _typeof(query) === 'object' ? query[lang] : query)), /*#__PURE__*/React.createElement("div", {
className: styles.popoverItem
}, /*#__PURE__*/React.createElement("div", {
className: styles.popoverLabel
}, /*#__PURE__*/React.createElement(FormattedMessage, {
id: "ai.recommend.card.description"
})), /*#__PURE__*/React.createElement("div", {
className: styles.popoverValue
}, _typeof(description) === 'object' ? description[lang] : description)));
return /*#__PURE__*/React.createElement(Popover, {
content: popoverContent,
placement: "top",
overlayClassName: styles.popoverOverlay
}, /*#__PURE__*/React.createElement("div", {
className: styles.card,
style: {
background: style === null || style === void 0 ? void 0 : style.backgroundColor
},
onClick: handleClick
}, /*#__PURE__*/React.createElement("div", {
className: styles.typeTag,
style: style
}, tag === AIMode.implement ? /*#__PURE__*/React.createElement(BarChartOutlined, {
className: styles.typeIcon
}) : /*#__PURE__*/React.createElement(QuestionCircleOutlined, {
className: styles.typeIcon
}), /*#__PURE__*/React.createElement("span", {
className: styles.typeText
}, /*#__PURE__*/React.createElement(FormattedMessage, {
id: ((_AIModeMeta$tag = AIModeMeta[tag]) === null || _AIModeMeta$tag === void 0 ? void 0 : _AIModeMeta$tag.name) || tag
}))), /*#__PURE__*/React.createElement("div", {
className: styles.title
}, _typeof(query) === 'object' ? query[lang] : query), /*#__PURE__*/React.createElement("div", {
className: styles.imageContainer
}, imageUrls.slice(0, 2).map(function (item, idx) {
return /*#__PURE__*/React.createElement("img", {
src: item,
key: idx,
className: styles["image".concat(idx)]
});
})), /*#__PURE__*/React.createElement("div", {
className: styles.hoverMask
})));
};