@nexusui/components/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.

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