@lobehub/fluent-emoji
Version:
Fluent Emoji are a collection of familiar, friendly, and modern emoji from Microsoft
79 lines • 3 kB
JavaScript
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { CopyButton } from '@lobehub/ui';
import { Typography } from 'antd';
import { createStyles } from 'antd-style';
import { capitalize } from 'lodash-es';
import { memo, useRef } from 'react';
import { Center, Flexbox } from 'react-layout-kit';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var useStyles = createStyles(function (_ref) {
var css = _ref.css,
token = _ref.token;
return {
card: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n\n overflow: hidden;\n\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n "])), token.colorBgContainer, token.colorBorderSecondary, token.borderRadiusLG),
row: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-block-start: 1px solid ", ";\n "])), token.colorFillSecondary),
title: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin: 0;\n font-size: 12px !important;\n "]))),
titleRow: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n margin-block-start: -8px;\n "])))
};
});
var EmojiItem = /*#__PURE__*/memo(function (_ref2) {
var children = _ref2.children,
title = _ref2.title,
url = _ref2.url,
emoji = _ref2.emoji;
var _useStyles = useStyles(),
styles = _useStyles.styles;
var ref = useRef(null);
return /*#__PURE__*/_jsxs(Flexbox, {
className: styles.card,
children: [/*#__PURE__*/_jsx(Center, {
height: 96,
ref: ref,
style: {
position: 'relative'
},
width: '100%',
children: children
}), /*#__PURE__*/_jsx(Flexbox, {
align: 'center',
className: styles.titleRow,
horizontal: true,
justify: 'space-between',
paddingBlock: 8,
paddingInline: 12,
width: '100%',
children: /*#__PURE__*/_jsx(Typography.Title, {
className: styles.title,
ellipsis: {
rows: 1
},
level: 2,
children: capitalize(title.replaceAll('-', ' '))
})
}), /*#__PURE__*/_jsx(Flexbox, {
align: 'center',
className: styles.row,
horizontal: true,
children: /*#__PURE__*/_jsxs(Flexbox, {
flex: 1,
horizontal: true,
paddingInline: 12,
children: [/*#__PURE__*/_jsx(Center, {
flex: 1,
height: 32,
children: emoji
}), /*#__PURE__*/_jsx(Center, {
flex: 1,
height: 32,
children: /*#__PURE__*/_jsx(CopyButton, {
content: url,
size: 'small'
})
})]
})
})]
});
});
export default EmojiItem;