@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
72 lines (69 loc) • 2 kB
JavaScript
'use client';
import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
import Icon_default from "../../../Icon/Icon.mjs";
import { styles } from "./style.mjs";
import { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Popover } from "antd";
import { ArrowRightIcon } from "lucide-react";
//#region src/mdx/mdxComponents/Citation/PopoverPanel.tsx
const PopoverPanel = ({ children, usePopover, title, alt, url }) => {
const [displayTitle, domain, host] = useMemo(() => {
try {
const urlObj = new URL(url);
const hostForUrl = urlObj.host;
let displayTitle$1 = title;
if (title === url) displayTitle$1 = "";
let domain$1 = urlObj.hostname.replace("www.", "");
if (!displayTitle$1) domain$1 = url;
return [
displayTitle$1,
domain$1,
hostForUrl
];
} catch {
return [
title,
url,
url
];
}
}, [url, title]);
return usePopover && url ? /* @__PURE__ */ jsx(Popover, {
arrow: false,
content: /* @__PURE__ */ jsxs(FlexBasic_default, {
gap: 8,
children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
className: styles.link,
gap: 12,
horizontal: true,
justify: "space-between",
onClick: () => {
window.open(url, "_blank");
},
children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
align: "center",
gap: 4,
horizontal: true,
children: [/* @__PURE__ */ jsx("img", {
alt: alt || title || url,
height: 14,
src: `https://icons.duckduckgo.com/ip3/${host}.ico`,
style: { borderRadius: 4 },
width: 14
}), /* @__PURE__ */ jsx("span", {
className: styles.url,
children: domain
})]
}), /* @__PURE__ */ jsx(Icon_default, { icon: ArrowRightIcon })]
}), displayTitle]
}),
trigger: "hover",
children
}) : children;
};
PopoverPanel.displayName = "MdxPopoverPanel";
var PopoverPanel_default = PopoverPanel;
//#endregion
export { PopoverPanel_default as default };
//# sourceMappingURL=PopoverPanel.mjs.map