64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
'use client'
|
|
|
|
// React Imports
|
|
import { useTranslations } from 'next-intl'
|
|
|
|
// MUI Imports
|
|
import Card from '@mui/material/Card'
|
|
import CardHeader from '@mui/material/CardHeader'
|
|
import CardContent from '@mui/material/CardContent'
|
|
import Typography from '@mui/material/Typography'
|
|
|
|
// Third-party Imports
|
|
import classnames from 'classnames'
|
|
|
|
// Component Imports
|
|
import OptionMenu from '@core/components/option-menu'
|
|
import CustomAvatar from '@core/components/mui/Avatar'
|
|
|
|
type RecommendationType = {
|
|
title: string
|
|
subtitle: string
|
|
avatarIcon: string
|
|
avatarColor: 'primary' | 'info' | 'success' | 'warning' | 'error'
|
|
}
|
|
|
|
interface RecommendationsListProps {
|
|
data?: Record<string, unknown>
|
|
}
|
|
|
|
const RecommendationsList = ({ data }: RecommendationsListProps) => {
|
|
const t = useTranslations('farmDashboard')
|
|
const recommendations = (data?.recommendations as RecommendationType[] | undefined) ?? []
|
|
if (recommendations.length === 0) return null
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader
|
|
title={t('cards.recommendationsList')}
|
|
subheader={t('subheaders.actionItems')}
|
|
action={<OptionMenu options={[t('optionMenu.export'), t('optionMenu.snooze'), t('optionMenu.markDone')]} />}
|
|
/>
|
|
<CardContent className='flex flex-col gap-4'>
|
|
{recommendations.map((item, index) => (
|
|
<div key={index} className='flex items-start gap-4'>
|
|
<CustomAvatar skin='light' variant='rounded' color={item.avatarColor} size={38}>
|
|
<i className={classnames(item.avatarIcon, 'text-[22px]')} />
|
|
</CustomAvatar>
|
|
<div className='flex flex-col flex-1 min-w-0'>
|
|
<Typography className='font-medium' color='text.primary'>
|
|
{item.title}
|
|
</Typography>
|
|
<Typography variant='body2' color='text.secondary'>
|
|
{item.subtitle}
|
|
</Typography>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default RecommendationsList
|