@undp/design-system-react/dist/ResourceCard.cjs.map

React based design system for UNDP

{"version":3,"file":"ResourceCard.cjs","names":[],"sources":["../src/components/ui/resource-card.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\n\nconst ResourceCard = React.forwardRef<\n  HTMLAnchorElement,\n  React.AnchorHTMLAttributes<HTMLAnchorElement>\n>(({ className, ...props }, ref) => (\n  <a\n    ref={ref}\n    className={cn(\n      'group box-border flex w-full flex-col items-stretch gap-0 bg-surface transition-all duration-400',\n      className,\n    )}\n    {...props}\n  />\n));\nResourceCard.displayName = 'ResourceCard';\n\ninterface ResourceCardImageProps extends React.HTMLAttributes<HTMLDivElement> {\n  imageSrc: string;\n  hoverColor?: boolean;\n  aspectRatio?: 'landscape' | 'portrait' | 'square';\n  imageClassNames?: string;\n}\nconst imgVariants = cva('relative w-full object-cover object-center opacity-100', {\n  variants: {\n    aspectRatio: {\n      landscape: 'aspect-video',\n      portrait: 'aspect-[3/4]',\n      square: 'aspect-square',\n    },\n  },\n  defaultVariants: {\n    aspectRatio: 'portrait',\n  },\n});\n\nconst ResourceCardImage = React.forwardRef<HTMLDivElement, ResourceCardImageProps>(\n  (\n    { className, imageSrc, aspectRatio = 'portrait', hoverColor = true, imageClassNames, ...props },\n    ref,\n  ) => (\n    <div\n      ref={ref}\n      className={cn(\n        `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)]`,\n        className,\n      )}\n      {...props}\n    >\n      <img\n        src={imageSrc}\n        alt='resource cover'\n        className={cn(imgVariants({ aspectRatio }), imageClassNames)}\n      />\n      {hoverColor ? (\n        <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' />\n      ) : null}\n    </div>\n  ),\n);\nResourceCardImage.displayName = 'ResourceCardImage';\n\nconst ResourceCardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn('flex grow flex-col p-6', className)} {...props} />\n  ),\n);\nResourceCardContent.displayName = 'ResourceCardContent';\n\nconst ResourceCardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'mb-1 flex gap-2 font-body font-normal text-p-xs md:text-p-sm lg:text-p',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nResourceCardTitle.displayName = 'ResourceCardTitle';\n\nconst ResourceCardDescription = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('mb-4 font-body font-normal text-sm md:text-base lg:text-base', className)}\n    {...props}\n  />\n));\nResourceCardDescription.displayName = 'ResourceCardDescription';\n\nconst ResourceCardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn('font-body', className)} {...props} />\n  ),\n);\nResourceCardFooter.displayName = 'ResourceCardFooter';\n\nexport {\n  ResourceCard,\n  ResourceCardContent,\n  ResourceCardDescription,\n  ResourceCardFooter,\n  ResourceCardImage,\n  ResourceCardTitle,\n};\n"],"mappings":"8PAIA,IAAM,EAAe,EAAM,YAGxB,CAAE,YAAW,GAAG,GAAS,KAC1B,EAAA,EAAA,IAAA,CAAC,IAAD,CACO,MACL,UAAW,EAAA,EACT,mGACA,CACF,EACA,GAAI,CACL,CAAA,CACF,EACD,EAAa,YAAc,eAQ3B,IAAM,EAAc,EAAA,EAAI,yDAA0D,CAChF,SAAU,CACR,YAAa,CACX,UAAW,eACX,SAAU,eACV,OAAQ,eACV,CACF,EACA,gBAAiB,CACf,YAAa,UACf,CACF,CAAC,EAEK,EAAoB,EAAM,YAE5B,CAAE,YAAW,WAAU,cAAc,WAAY,aAAa,GAAM,kBAAiB,GAAG,GACxF,KAEA,EAAA,EAAA,KAAA,CAAC,MAAD,CACO,MACL,UAAW,EAAA,EACT,0WACA,CACF,EACA,GAAI,WANN,EAQE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,IAAK,EACL,IAAI,iBACJ,UAAW,EAAA,EAAG,EAAY,CAAE,aAAY,CAAC,EAAG,CAAe,CAC5D,CAAA,EACA,GACC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,sJAAwJ,CAAA,EACrK,IACD,GAET,EACA,EAAkB,YAAc,oBAEhC,IAAM,EAAsB,EAAM,YAC/B,CAAE,YAAW,GAAG,GAAS,KACxB,EAAA,EAAA,IAAA,CAAC,MAAD,CAAU,MAAK,UAAW,EAAA,EAAG,yBAA0B,CAAS,EAAG,GAAI,CAAQ,CAAA,CAEnF,EACA,EAAoB,YAAc,sBAElC,IAAM,EAAoB,EAAM,YAC7B,CAAE,YAAW,GAAG,GAAS,KACxB,EAAA,EAAA,IAAA,CAAC,MAAD,CACO,MACL,UAAW,EAAA,EACT,yEACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,EACA,EAAkB,YAAc,oBAEhC,IAAM,EAA0B,EAAM,YAGnC,CAAE,YAAW,GAAG,GAAS,KAC1B,EAAA,EAAA,IAAA,CAAC,MAAD,CACO,MACL,UAAW,EAAA,EAAG,+DAAgE,CAAS,EACvF,GAAI,CACL,CAAA,CACF,EACD,EAAwB,YAAc,0BAEtC,IAAM,EAAqB,EAAM,YAC9B,CAAE,YAAW,GAAG,GAAS,KACxB,EAAA,EAAA,IAAA,CAAC,MAAD,CAAU,MAAK,UAAW,EAAA,EAAG,YAAa,CAAS,EAAG,GAAI,CAAQ,CAAA,CAEtE,EACA,EAAmB,YAAc"}