UNPKG

@undp/design-system-react

Version:

React based design system for UNDP

2 lines 2.41 kB
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./rolldown-runtime-mLOUI7ql.cjs"),t=require("./utils-Dd9-5CFr.cjs"),n=require("./dist-BZMXZCSu.cjs");let r=require("react");r=e.r(r,1);let i=require("react/jsx-runtime");var a=r.forwardRef(({className:e,...n},r)=>(0,i.jsx)(`a`,{ref:r,className:t.t(`group box-border flex w-full flex-col items-stretch gap-0 bg-surface transition-all duration-400`,e),...n}));a.displayName=`ResourceCard`;var o=n.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=r.forwardRef(({className:e,imageSrc:n,aspectRatio:r=`portrait`,hoverColor:a=!0,imageClassNames:s,...c},l)=>(0,i.jsxs)(`div`,{ref:l,className:t.t(`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)]`,e),...c,children:[(0,i.jsx)(`img`,{src:n,alt:`resource cover`,className:t.t(o({aspectRatio:r}),s)}),a?(0,i.jsx)(`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=r.forwardRef(({className:e,...n},r)=>(0,i.jsx)(`div`,{ref:r,className:t.t(`flex grow flex-col p-6`,e),...n}));c.displayName=`ResourceCardContent`;var l=r.forwardRef(({className:e,...n},r)=>(0,i.jsx)(`div`,{ref:r,className:t.t(`mb-1 flex gap-2 font-body font-normal text-p-xs md:text-p-sm lg:text-p`,e),...n}));l.displayName=`ResourceCardTitle`;var u=r.forwardRef(({className:e,...n},r)=>(0,i.jsx)(`div`,{ref:r,className:t.t(`mb-4 font-body font-normal text-sm md:text-base lg:text-base`,e),...n}));u.displayName=`ResourceCardDescription`;var d=r.forwardRef(({className:e,...n},r)=>(0,i.jsx)(`div`,{ref:r,className:t.t(`font-body`,e),...n}));d.displayName=`ResourceCardFooter`,exports.ResourceCard=a,exports.ResourceCardContent=c,exports.ResourceCardDescription=u,exports.ResourceCardFooter=d,exports.ResourceCardImage=s,exports.ResourceCardTitle=l; //# sourceMappingURL=ResourceCard.cjs.map