@lobehub/fluent-emoji/es/FluentEmoji/index.mjs

Fluent Emoji are a collection of familiar, friendly, and modern emoji from Microsoft

"use client";
import { getFluentEmojiCDN } from "../getFluentEmojiCDN/index.mjs";
import { styles } from "./style.mjs";
import { cx } from "antd-style";
import { createElement, forwardRef, useMemo, useState } from "react";
import { jsx } from "react/jsx-runtime";
//#region src/FluentEmoji/index.tsx
const createContainer = (as) => forwardRef((props, ref) => createElement(as, {
	...props,
	ref
}));
const FluentEmoji = forwardRef(({ emoji, className, style, type = "3d", cdn = "aliyun", size = 40, unoptimized, as = "img", onError }, ref) => {
	const [loadingFail, setLoadingFail] = useState(false);
	const ImgContainer = useMemo(() => createContainer(as), [as]);
	const emojiUrl = useMemo(() => {
		if (type === "pure") return null;
		return getFluentEmojiCDN(emoji, {
			cdn,
			type
		});
	}, [type, emoji]);
	if (type === "pure" || !emojiUrl || loadingFail) return /* @__PURE__ */ jsx("div", {
		className: cx(styles.container, className),
		style: {
			alignItems: "center",
			display: "inline-flex",
			fontSize: size,
			height: size,
			justifyContent: "center",
			verticalAlign: "middle",
			width: size,
			...style
		},
		children: emoji
	});
	return /* @__PURE__ */ jsx(ImgContainer, {
		alt: emoji,
		className,
		height: size,
		loading: "lazy",
		onError: (e) => {
			setLoadingFail(true);
			onError?.(e);
		},
		ref,
		src: emojiUrl,
		style: {
			flex: "none",
			...style
		},
		unoptimized,
		width: size
	});
});
//#endregion
export { FluentEmoji as default };

//# sourceMappingURL=index.mjs.map