// ** MUI Imports import Box from '@mui/material/Box' import Card from '@mui/material/Card' import Avatar from '@mui/material/Avatar' import Typography from '@mui/material/Typography' import CardHeader from '@mui/material/CardHeader' import CardContent from '@mui/material/CardContent' // ** Custom Components import CustomChip from 'src/@core/components/mui/chip' import OptionsMenu from 'src/@core/components/option-menu' import Image from 'next/image' interface DataType { src: string title: string imgAlt: string subtitle: string chipText: string imgWidth: number imgHeight: number } const data: DataType[] = [ { imgWidth: 22, imgHeight: 22, chipText: '$6,500', title: '3D Illustration', imgAlt: '3d-illustration', subtitle: 'Blender Illustration', src: '/images/cards/3d-illustration.png' }, { imgWidth: 33, imgHeight: 22, chipText: '$4,290', subtitle: 'Figma UI Kit', title: 'Finance App Design', imgAlt: 'finance-app-design', src: '/images/cards/finance-app-design.png' }, { imgWidth: 20, imgHeight: 22, title: '4 Square', imgAlt: '4-square', chipText: '$44,500', subtitle: 'Android Application', src: '/images/cards/4-square.png' }, { imgWidth: 19, imgHeight: 22, chipText: '$12,690', title: 'Delta Web App', imgAlt: 'delta-web-app', subtitle: 'React Dashboard', src: '/images/cards/delta-web-app.png' }, { imgWidth: 23, imgHeight: 22, chipText: '$10,850', subtitle: 'Vue + Laravel', title: 'eCommerce Website', imgAlt: 'ecommerce-website', src: '/images/cards/ecommerce-website.png' } ] const AnalyticsProjectStatistics = () => { return ( <Card> <CardHeader title='Project Statistics' action={ <OptionsMenu options={['Refresh', 'Edit', 'Share']} iconButtonProps={{ size: 'small', className: 'card-more-options' }} /> } /> <CardContent> <Box sx={{ mb: 4, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> <Typography sx={{ lineHeight: 2, fontWeight: 500, fontSize: '0.75rem', letterSpacing: '0.17px', textTransform: 'uppercase' }} > Name </Typography> <Typography sx={{ lineHeight: 2, fontWeight: 500, fontSize: '0.75rem', letterSpacing: '0.17px', textTransform: 'uppercase' }} > Budget </Typography> </Box> {data.map((item: DataType, index: number) => { return ( <Box key={item.title} sx={{ display: 'flex', alignItems: 'center', mb: index !== data.length - 1 ? [4, 4, 5] : undefined }} > <Avatar variant='rounded' sx={{ mr: 3, width: 50, height: 42, backgroundColor: 'background.default' }}> <Image alt='avatar' src={item.src} width={item.imgWidth} height={item.imgHeight} /> </Avatar> <Box sx={{ width: '100%', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between' }} > <Box sx={{ mr: 2, display: 'flex', mb: 0.4, flexDirection: 'column' }}> <Typography variant='body2' sx={{ mb: 0.5, fontWeight: 600, color: 'text.primary' }}> {item.title} </Typography> <Typography variant='caption'>{item.subtitle}</Typography> </Box> <CustomChip skin='light' size='small' color='primary' label={item.chipText} sx={{ height: 20, fontSize: '0.75rem', fontWeight: 500 }} /> </Box> </Box> ) })} </CardContent> </Card> ) } export default AnalyticsProjectStatistics