@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
169 lines • 5.15 kB
JavaScript
var _TextForLinesOutput;
import React from 'react';
import { Icon } from '@iconify/react';
import { Box, Stack, useTheme } from '@mui/material';
import { consts } from '../../../../helpers/consts';
import { CardFlexible } from '../../../../organisms';
import { ICONS_NAME } from '../../../../helpers/icons';
import { AvatarTitleDescription, IconButtonComponent, IconText, TextForLinesOutput } from '../../../../components';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var CardInvestment = function CardInvestment() {
var theme = useTheme();
return /*#__PURE__*/_jsxs(CardFlexible, {
disabledHover: true,
shadow: "none",
padding: "0px",
border: "1px solid ".concat(theme.palette.background.paper),
sx: {
display: 'flex',
flexDirection: 'column',
rowGap: '15px',
height: 'auto'
},
children: [/*#__PURE__*/_jsxs(Box, {
component: "article",
sx: {
background: "url(".concat(consts.backgroundImageRandom, ") center center no-repeat"),
backgroundSize: 'cover',
borderRadius: '15px',
minHeight: '220px',
height: '100%',
width: '100%',
flexGrow: 1,
flex: 1,
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
position: 'relative'
},
children: [/*#__PURE__*/_jsxs(Stack, {
direction: "row",
justifyContent: "flex-end",
columnGap: 2,
flexWrap: "wrap",
sx: {
p: '15px'
},
children: [/*#__PURE__*/_jsx(IconButtonComponent, {
iconProps: {
sx: {
position: 'relative',
backgroundColor: 'rgba(247, 247, 247, 0.1)',
'&:hover': {
backgroundColor: 'rgba(247, 247, 247, 0.4)'
}
}
},
children: /*#__PURE__*/_jsx(Icon, {
icon: ICONS_NAME.document,
color: theme.palette.background["default"],
style: {
zIndex: 2
}
})
}), /*#__PURE__*/_jsx(IconButtonComponent, {
iconProps: {
sx: {
position: 'relative',
backgroundColor: 'rgba(247, 247, 247, 0.1)',
'&:hover': {
backgroundColor: 'rgba(247, 247, 247, 0.4)'
}
}
},
children: /*#__PURE__*/_jsx(Icon, {
icon: ICONS_NAME.edit,
color: theme.palette.background["default"],
style: {
zIndex: 2
}
})
})]
}), /*#__PURE__*/_jsx(Stack, {
direction: "row",
justifyContent: "flex-end",
sx: {
p: '0px 15px',
marginBottom: '-15px',
zIndex: 3
},
children: /*#__PURE__*/_jsx(IconButtonComponent, {
iconProps: {
sx: {
boxShadow: theme.shadows[1]
}
},
children: /*#__PURE__*/_jsx(Icon, {
icon: ICONS_NAME.bookmark,
color: theme.palette.primary.main
})
})
}), /*#__PURE__*/_jsx(Box, {
sx: {
position: 'absolute',
bottom: 0,
left: 0,
rigth: 0,
zIndex: 2,
width: '100%',
height: '70%',
background: 'linear-gradient(182.4deg, rgba(255, 255, 255, 0) 38.06%, #FFFFFF 89.88%)'
}
})]
}), /*#__PURE__*/_jsxs(Stack, {
rowGap: "15px",
sx: {
marginTop: '-10px'
},
children: [/*#__PURE__*/_jsx(Box, {
component: "header",
sx: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
p: '0px 15px'
},
children: /*#__PURE__*/_jsx(AvatarTitleDescription, {
title: "WULPERS LLC",
description: "USA | FinTech",
avatarProps: {
disabledHover: true,
src: consts.avatarImg
}
})
}), /*#__PURE__*/_jsx(Box, {
sx: {
p: '0px 15px'
},
children: _TextForLinesOutput || (_TextForLinesOutput = /*#__PURE__*/_jsx(TextForLinesOutput, {
clines: 2,
text: "First CMS all in 1 for B2B market in LATAM",
variant: "h3"
}))
}), /*#__PURE__*/_jsxs(Stack, {
sx: {
p: '0px 15px 15px 15px'
},
direction: "row",
justifyContent: "flex-start",
columnGap: 2,
flexWrap: "wrap",
children: [/*#__PURE__*/_jsx(IconText, {
isOpenTooltip: true,
nameIcon: ICONS_NAME.users,
text: "120",
colorIcon: theme.palette.text.secondary
}), /*#__PURE__*/_jsx(IconText, {
isOpenTooltip: true,
nameIcon: ICONS_NAME.person_add,
text: "4.2",
colorIcon: theme.palette.text.secondary
}), /*#__PURE__*/_jsx(IconText, {
nameIcon: ICONS_NAME.starCardHelper,
text: "5.0",
colorIcon: theme.palette.text.secondary
})]
})]
})]
});
};