@undp/design-system-react/dist/ResourceCard.js

React based design system for UNDP

import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./dist-CQzJbxrW.js";
import * as n from "react";
import { jsx as r, jsxs as i } from "react/jsx-runtime";
//#region src/components/ui/resource-card.tsx
var a = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("a", {
	ref: i,
	className: e("group box-border flex w-full flex-col items-stretch gap-0 bg-surface transition-all duration-400", t),
	...n
}));
a.displayName = "ResourceCard";
var o = t("relative w-full object-cover object-center opacity-100", {
	variants: { aspectRatio: {
		landscape: "aspect-video",
		portrait: "aspect-[3/4]",
		square: "aspect-square"
	} },
	defaultVariants: { aspectRatio: "portrait" }
}), s = n.forwardRef(({ className: t, imageSrc: n, aspectRatio: a = "portrait", hoverColor: s = !0, imageClassNames: c, ...l }, u) => /* @__PURE__ */ i("div", {
	ref: u,
	className: e("relative box-border w-full bg-[linear-gradient(180deg,_#c9d0d6_70%,_#c9d0d6_0,_#414648_70.5%,_#9ea5ac_0,_#9ea5ac)] px-12 py-9 before:pointer-events-none before:absolute before:bottom-[37px] before:left-8 before:h-[27px] before:w-[calc(100%-100px)] before:rounded-[21%] before:bg-surface-xl before:blur-[4px] before:content-[''] before:[transform:skewX(64deg)]", t),
	...l,
	children: [/* @__PURE__ */ r("img", {
		src: n,
		alt: "resource cover",
		className: e(o({ aspectRatio: a }), c)
	}), s ? /* @__PURE__ */ r("div", { className: "absolute top-0 left-0 z-[1] h-full w-full bg-[linear-gradient(27.66deg,var(--card-hover-color),transparent_70.49%)] opacity-0 group-hover:opacity-75" }) : null]
}));
s.displayName = "ResourceCardImage";
var c = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("div", {
	ref: i,
	className: e("flex grow flex-col p-6", t),
	...n
}));
c.displayName = "ResourceCardContent";
var l = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("div", {
	ref: i,
	className: e("mb-1 flex gap-2 font-body font-normal text-p-xs md:text-p-sm lg:text-p", t),
	...n
}));
l.displayName = "ResourceCardTitle";
var u = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("div", {
	ref: i,
	className: e("mb-4 font-body font-normal text-sm md:text-base lg:text-base", t),
	...n
}));
u.displayName = "ResourceCardDescription";
var d = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("div", {
	ref: i,
	className: e("font-body", t),
	...n
}));
d.displayName = "ResourceCardFooter";
//#endregion
export { a as ResourceCard, c as ResourceCardContent, u as ResourceCardDescription, d as ResourceCardFooter, s as ResourceCardImage, l as ResourceCardTitle };

//# sourceMappingURL=ResourceCard.js.map