@nexusui/components
Version:
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.
2 lines (1 loc) • 1.72 kB
JavaScript
import{jsx as r,jsxs as i}from"react/jsx-runtime";import{useMemo as t}from"react";import a from"@mui/material/Card";import o from"@mui/material/Box";import e from"@mui/material/Typography";import n from"@mui/material/Stack";import s from"@mui/material/CardContent";import l from"@mui/icons-material/OpenInNew";import m from"@mui/material/CardActionArea";import{useCardActions as d}from"../Card/hooks/useCardActions.js";import{useCardLoading as c}from"../Card/hooks/useCardLoading.js";import{LoadingManager as p}from"../Card/components/LoadingManager.js";import{LinkCardSkeleton as f}from"./LinkCard.skeleton.js";import{openLink as u}from"../util/functions/index.js";const g="NexusLinkCard",C=C=>{const{dense:h,label:x,actions:k,actionButtons:b,title:y,href:j,loading:A,loadingMode:N="spinner",target:L="_blank",sx:$,...w}=C,{renderActions:B}=d({actions:k,actionButtons:b,skip:!k&&!b&&"_blank"!==L,extraActions:"_blank"===L&&r(l,{}),classPrefix:g,padding:0}),M=t((()=>y?r(o,{className:`${g}-titleContainer`,sx:{mr:4},children:"string"==typeof y?r(e,{className:`${g}-title`,children:y}):y}):null),[y]),_=t((()=>x?r(o,{className:`${g}-labelContainer`,sx:{mb:2},children:"string"==typeof x?r(e,{color:"primary",variant:"caption",fontWeight:700,className:`${g}-label`,children:x}):x}):null),[x]),{renderLoadingPanel:v,cardLoadingStyle:I}=c(A,N);return r(a,{className:`${g}-root`,"data-testid":`${g}-root`,sx:[I,...Array.isArray($)?$:[$]],...w,children:i(p,{loading:A,loadingMode:N,skeleton:f,children:[r(m,{disabled:!j,onClick:r=>{r.preventDefault(),u(j,L)},children:i(s,{sx:{p:h?4:6},children:[_,i(n,{direction:"row",alignItems:"flex-start",justifyContent:"space-between",children:[M,B]})]})}),v]})})};export{C as LinkCard};