62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
// Next Imports
|
|
|
|
// MUI Imports
|
|
import Card from '@mui/material/Card'
|
|
import CardContent from '@mui/material/CardContent'
|
|
|
|
// Third-party Imports
|
|
import classnames from 'classnames'
|
|
import CustomAvatar, { CustomAvatarProps } from '../../../@core/components/mui/Avatar'
|
|
import { ThemeColor } from '../../../@core/types'
|
|
import { Skeleton, Typography } from '@mui/material'
|
|
import { formatShortCurrency } from '../../../utils/transform'
|
|
|
|
type Props = {
|
|
title: string
|
|
value: number
|
|
isCurrency: boolean
|
|
isLoading: boolean
|
|
avatarIcon: string
|
|
avatarSkin?: CustomAvatarProps['skin']
|
|
avatarSize?: number
|
|
avatarColor?: ThemeColor
|
|
}
|
|
|
|
const DistributedBarChartOrder = ({
|
|
title,
|
|
value,
|
|
isCurrency = false,
|
|
isLoading,
|
|
avatarIcon,
|
|
avatarSkin,
|
|
avatarColor
|
|
}: Props) => {
|
|
if (isLoading) {
|
|
return <Skeleton sx={{ bgcolor: 'grey.100' }} variant='rectangular' width={300} height={118} />
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardContent>
|
|
<div className='flex items-start justify-between'>
|
|
<div className='flex-1'>
|
|
<Typography variant='h6' color='text.disabled'>
|
|
{title}
|
|
</Typography>
|
|
<Typography color='text.primary' variant='h4'>
|
|
{isCurrency ? 'Rp ' + formatShortCurrency(value) : formatShortCurrency(value)}
|
|
</Typography>
|
|
</div>
|
|
<CustomAvatar variant='rounded' skin={avatarSkin} size={52} color={avatarColor}>
|
|
<i className={classnames(avatarIcon, 'text-[28px]')} />
|
|
</CustomAvatar>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default DistributedBarChartOrder
|