@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
75 lines (72 loc) • 2.06 kB
JavaScript
'use client';
import A_default from "../../../A/index.mjs";
import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
import Block_default from "../../../Block/Block.mjs";
import Text_default from "../../../Text/Text.mjs";
import Img_default from "../../../Img/index.mjs";
import { styles } from "./style.mjs";
import { memo, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/Markdown/components/SearchResultCards/SearchResultCard.tsx
const SearchResultCard = memo(({ ref, url, title, alt, ...rest }) => {
const [displayTitle, domain, host] = useMemo(() => {
try {
const urlObj = new URL(url);
const domain$1 = urlObj.hostname.replace("www.", "");
const hostForUrl = urlObj.host;
let displayTitle$1 = title;
if (title === url) displayTitle$1 = hostForUrl + urlObj.pathname;
return [
displayTitle$1,
domain$1,
hostForUrl
];
} catch {
return [
title,
url,
url
];
}
}, [url, title]);
return /* @__PURE__ */ jsx(A_default, {
href: url,
ref,
rel: "noreferrer",
target: "_blank",
...rest,
children: /* @__PURE__ */ jsxs(Block_default, {
className: styles.container,
clickable: true,
gap: 2,
justify: "space-between",
paddingBlock: 6,
paddingInline: 8,
variant: "outlined",
children: [/* @__PURE__ */ jsx(Text_default, {
ellipsis: { rows: 2 },
children: displayTitle
}), /* @__PURE__ */ jsxs(FlexBasic_default, {
align: "center",
gap: 4,
horizontal: true,
children: [/* @__PURE__ */ jsx(Img_default, {
alt: alt || title || url,
height: 14,
src: `https://icons.duckduckgo.com/ip3/${host}.ico`,
width: 14
}), /* @__PURE__ */ jsx(Text_default, {
className: styles.url,
ellipsis: true,
type: "secondary",
children: domain
})]
})]
}, url)
});
});
SearchResultCard.displayName = "SearchResultCard";
var SearchResultCard_default = SearchResultCard;
//#endregion
export { SearchResultCard_default as default };
//# sourceMappingURL=SearchResultCard.mjs.map