@lobehub/ui/es/mdx/Cards/Card.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

'use client';

import A_default from "../../A/index.mjs";
import FlexBasic_default from "../../Flex/FlexBasic.mjs";
import Block_default from "../../Block/Block.mjs";
import Icon_default from "../../Icon/Icon.mjs";
import Img_default from "../../Img/index.mjs";
import Tag_default from "../../Tag/Tag.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
import { createStaticStyles, cx } from "antd-style";

//#region src/mdx/Cards/Card.tsx
const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
	return {
		card: css$1`
      --lobe-markdown-header-multiple: 0.2;
      --lobe-markdown-margin-multiple: 1;

      overflow: hidden;
      height: 100%;
      color: ${cssVar$1.colorText};

      h3,
      p {
        margin-block: 0 !important;
      }

      p {
        color: ${cssVar$1.colorTextDescription};
        transition: color 0.2s ${cssVar$1.motionEaseInOut};
      }

      &:hover {
        p {
          color: ${cssVar$1.colorTextSecondary};
        }

        .mdx-card-icon {
          opacity: 1;
        }
      }
    `,
		content: css$1`
      width: 100%;
      padding: 1.4em;
    `,
		icon: css$1`
      margin-block: 0.1em;
      opacity: 0.5;
      transition: opacity 0.2s ${cssVar$1.motionEaseInOut};
    `
	};
});
const Card = ({ tag, tagColor = "blue", icon, title, desc, href, iconProps, className, image, variant = "filled", ...rest }) => {
	return /* @__PURE__ */ jsx(A_default, {
		href,
		children: /* @__PURE__ */ jsxs(Block_default, {
			align: "flex-start",
			className: cx(styles.card, className),
			clickable: true,
			variant,
			...rest,
			children: [
				image && /* @__PURE__ */ jsx(Img_default, {
					alt: title,
					height: 100,
					src: image,
					style: {
						height: "auto",
						width: "100%"
					},
					width: 250
				}),
				tag && /* @__PURE__ */ jsx(FlexBasic_default, {
					align: "flex-start",
					className: styles.content,
					style: {
						paddingBottom: "0.2em",
						paddingTop: "1.8em"
					},
					children: /* @__PURE__ */ jsx(Tag_default, {
						color: tagColor,
						style: {
							borderRadius: "1em",
							fontSize: "0.8em",
							fontWeight: 500,
							paddingBlock: "0.1em",
							paddingInline: "0.6em"
						},
						children: tag
					})
				}),
				/* @__PURE__ */ jsxs(FlexBasic_default, {
					align: desc ? "flex-start" : "center",
					className: styles.content,
					gap: "0.75em",
					horizontal: true,
					children: [!image && icon && /* @__PURE__ */ jsx(Icon_default, {
						className: cx(styles.icon, "mdx-card-icon"),
						icon,
						size: { size: "1.5em" },
						...iconProps
					}), /* @__PURE__ */ jsxs(FlexBasic_default, {
						gap: "0.2em",
						children: [/* @__PURE__ */ jsx("h3", { children: title }), desc && /* @__PURE__ */ jsx("p", { children: desc })]
					})]
				})
			]
		})
	});
};
Card.displayName = "MdxCard";
var Card_default = Card;

//#endregion
export { Card_default as default };
//# sourceMappingURL=Card.mjs.map