mirror of https://github.com/FlowiseAI/Flowise.git
154 lines
6.5 KiB
JavaScript
154 lines
6.5 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import { useSelector } from 'react-redux'
|
|
|
|
// material-ui
|
|
import { styled } from '@mui/material/styles'
|
|
import { Box, Grid, Typography, useTheme } from '@mui/material'
|
|
|
|
// project imports
|
|
import MainCard from '@/ui-component/cards/MainCard'
|
|
|
|
const CardWrapper = styled(MainCard)(({ theme }) => ({
|
|
background: theme.palette.card.main,
|
|
color: theme.darkTextPrimary,
|
|
overflow: 'auto',
|
|
position: 'relative',
|
|
boxShadow: '0 2px 14px 0 rgb(32 40 45 / 8%)',
|
|
cursor: 'pointer',
|
|
'&:hover': {
|
|
background: theme.palette.card.hover,
|
|
boxShadow: '0 2px 14px 0 rgb(32 40 45 / 20%)'
|
|
},
|
|
height: '100%',
|
|
minHeight: '160px',
|
|
maxHeight: '300px',
|
|
width: '100%',
|
|
overflowWrap: 'break-word',
|
|
whiteSpace: 'pre-line'
|
|
}))
|
|
|
|
// ===========================|| CONTRACT CARD ||=========================== //
|
|
|
|
const ItemCard = ({ data, images, onClick }) => {
|
|
const theme = useTheme()
|
|
const customization = useSelector((state) => state.customization)
|
|
|
|
return (
|
|
<CardWrapper content={false} onClick={onClick} sx={{ border: 1, borderColor: theme.palette.grey[900] + 25, borderRadius: 2 }}>
|
|
<Box sx={{ height: '100%', p: 2.25 }}>
|
|
<Grid container justifyContent='space-between' direction='column' sx={{ height: '100%', gap: 3 }}>
|
|
<Box display='flex' flexDirection='column' sx={{ width: '100%' }}>
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
overflow: 'hidden'
|
|
}}
|
|
>
|
|
{data.iconSrc && (
|
|
<div
|
|
style={{
|
|
width: 35,
|
|
height: 35,
|
|
display: 'flex',
|
|
flexShrink: 0,
|
|
marginRight: 10,
|
|
borderRadius: '50%',
|
|
background: `url(${data.iconSrc})`,
|
|
backgroundSize: 'contain',
|
|
backgroundRepeat: 'no-repeat',
|
|
backgroundPosition: 'center center'
|
|
}}
|
|
></div>
|
|
)}
|
|
{!data.iconSrc && data.color && (
|
|
<div
|
|
style={{
|
|
width: 35,
|
|
height: 35,
|
|
display: 'flex',
|
|
flexShrink: 0,
|
|
marginRight: 10,
|
|
borderRadius: '50%',
|
|
background: data.color
|
|
}}
|
|
></div>
|
|
)}
|
|
<Typography
|
|
sx={{
|
|
display: '-webkit-box',
|
|
fontSize: '1.25rem',
|
|
fontWeight: 500,
|
|
WebkitLineClamp: 2,
|
|
WebkitBoxOrient: 'vertical',
|
|
textOverflow: 'ellipsis',
|
|
overflow: 'hidden'
|
|
}}
|
|
>
|
|
{data.templateName || data.name}
|
|
</Typography>
|
|
</div>
|
|
{data.description && (
|
|
<span
|
|
style={{
|
|
display: '-webkit-box',
|
|
marginTop: 10,
|
|
overflowWrap: 'break-word',
|
|
WebkitLineClamp: 3,
|
|
WebkitBoxOrient: 'vertical',
|
|
textOverflow: 'ellipsis',
|
|
overflow: 'hidden'
|
|
}}
|
|
>
|
|
{data.description}
|
|
</span>
|
|
)}
|
|
</Box>
|
|
{images && (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'start',
|
|
gap: 1
|
|
}}
|
|
>
|
|
{images.slice(0, images.length > 3 ? 3 : images.length).map((img) => (
|
|
<Box
|
|
key={img}
|
|
sx={{
|
|
width: 30,
|
|
height: 30,
|
|
borderRadius: '50%',
|
|
backgroundColor: customization.isDarkMode
|
|
? theme.palette.common.white
|
|
: theme.palette.grey[300] + 75
|
|
}}
|
|
>
|
|
<img style={{ width: '100%', height: '100%', padding: 5, objectFit: 'contain' }} alt='' src={img} />
|
|
</Box>
|
|
))}
|
|
{images.length > 3 && (
|
|
<Typography sx={{ alignItems: 'center', display: 'flex', fontSize: '.9rem', fontWeight: 200 }}>
|
|
+ {images.length - 3} More
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
)}
|
|
</Grid>
|
|
</Box>
|
|
</CardWrapper>
|
|
)
|
|
}
|
|
|
|
ItemCard.propTypes = {
|
|
isLoading: PropTypes.bool,
|
|
data: PropTypes.object,
|
|
images: PropTypes.array,
|
|
onClick: PropTypes.func
|
|
}
|
|
|
|
export default ItemCard
|