@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.43 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),i=require("@mui/material"),t=require("../../BrandCore/Icon/Icon.js"),s=require("./_partials/ProjectItemTitle.js"),n=require("./_partials/styledPartials.js");module.exports=({onClick:a,viewType:r,title:d})=>{const l=i.useTheme();return"list"===r?e.jsx(n.CardContainer,{disableRaisedEffect:!0,sx:{borderBottom:`1px solid ${l.custom.palette.stroke.light}`},children:e.jsxs(n.CardActionArea,{component:"div",onClick:a,sx:{display:"flex",gap:l.spacing(l.custom.margin.sm),alignItems:"center",padding:l.spacing(l.custom.padding.xs)},children:[e.jsx(n.ImageContainer,{sx:{height:72,width:108},"data-id":"image-container",children:e.jsx(n.Tile,{viewType:r,children:e.jsx(t.default,{name:"add"})})}),e.jsx(n.CardContent,{sx:{overflow:"hidden",pl:l.spacing(l.custom.padding.sm),minWidth:67,flex:1,"&:last-child":{pb:0}},children:e.jsx(i.Stack,{gap:l.spacing(l.custom.margin.xs),children:e.jsx(s,{title:d,maxLines:1})})})]})}):e.jsx(n.CardContainer,{sx:{height:"100%"},children:e.jsxs(n.CardActionArea,{component:"div",onClick:a,disableHoverStyle:!0,sx:{height:"inherit",display:"flex",flexDirection:"column",justifyContent:"flex-start",alignItems:"flex-start"},children:[e.jsx(n.ImageContainer,{"data-id":"image-container",sx:{width:"100%"},children:e.jsx(n.Tile,{viewType:r,children:e.jsx(t.default,{name:"add"})})}),e.jsx(n.CardContent,{children:e.jsx(s,{title:d,maxLines:2})})]})})};