@nexusui/components/cjs/core/ImageCard/ImageCard.component.js

These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("react"),r=require("@mui/material/Card"),i=require("@mui/material/Box"),t=require("@mui/material/Typography"),s=require("@mui/material/Stack"),n=require("@mui/material/CardContent"),d=require("@mui/material/CardMedia"),o=require("../Card/hooks/useCardActions.js"),l=require("../Card/hooks/useCardBadges.js"),u=require("../Card/hooks/useCardLoading.js"),c=require("./ImageCard.skeleton.js"),m=require("../Card/components/LoadingManager.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=x(r),C=x(i),h=x(t),f=x(s),j=x(n),p=x(d);const q="NexusImageCard";exports.ImageCard=r=>{const{icon:i,headline:t,sx:s,direction:n="column",content:d,actions:x,loading:y,loadingMode:k="spinner",actionButtons:b,dense:$,onClick:B,image:M,statusBadges:v,...N}=r,{renderActions:L}=o.useCardActions({actions:x,actionButtons:b,classPrefix:q,padding:$?4:6}),{renderStatusBadges:w}=l.useCardBadges({sx:{mb:$?3:4},statusBadges:v,classPrefix:q}),A=a.useMemo((()=>M?e.jsx(p.default,{className:`${q}-image`,image:M,"aria-label":"Card image","data-testid":`${q}-image`,sx:"column"===n?{height:$?190:250}:{flex:"1 1 0px",maxWidth:$?200:300}}):null),[M,$,n]),I=a.useMemo((()=>t?e.jsxs(f.default,{direction:"row",alignItems:"center",className:`${q}-headlineContainer`,sx:{mb:$?4:8},children:[i&&e.jsx(f.default,{className:`${q}-iconContainer`,"data-testid":`${q}-iconContainer`,sx:{mr:4,width:32,height:32},children:i}),"string"==typeof t?e.jsx(h.default,{variant:$?"body2":"h6",fontWeight:600,className:`${q}-headline`,sx:{overflow:"hidden",textOverflow:"ellipsis",display:"-webkit-box",WebkitLineClamp:"2",WebkitBoxOrient:"vertical"},children:t}):t]},`${q}-headlineContainer`):null),[t,$,i]),P=a.useMemo((()=>d?e.jsx(C.default,{className:`${q}-contentContainer`,children:"string"==typeof d?e.jsx(h.default,{variant:"body2",className:`${q}-content`,children:d}):d}):null),[d]),{renderLoadingPanel:S,cardLoadingStyle:W}=u.useCardLoading(y);return e.jsx(g.default,{className:`${q}-root`,"data-testid":`${q}-root`,sx:[{display:"flex",flexDirection:n},W,...Array.isArray(s)?s:[s]],onClick:B,...N,children:e.jsxs(m.LoadingManager,{loading:y,loadingMode:k,skeleton:c.ImageCardSkeleton,children:["column"===n&&A,e.jsxs(f.default,{sx:{flex:"1 1 0px"},children:[e.jsxs(j.default,{sx:{p:$?4:6},children:[w,I,P]}),L]}),"row"===n&&A,S]})})};