import { Box, Card, Grid, List, Typography } from '@mui/joy'
import moment from 'moment'
import HistoryCard from '../History/HistoryCard'
const DemoHistory = () => {
const allHistory = [
{
id: 32,
choreId: 12,
completedAt: moment().hour(4).format(),
completedBy: 1,
assignedTo: 1,
notes: null,
dueDate: moment().format(),
},
{
id: 31,
choreId: 12,
completedAt: moment().day(-1).format(),
completedBy: 1,
assignedTo: 1,
notes: 'Need to be replaced with a new one',
dueDate: moment().day(-2).format(),
},
{
id: 31,
choreId: 12,
completedAt: moment().day(-10).hour(1).format(),
completedBy: 2,
assignedTo: 1,
notes: null,
dueDate: moment().day(-10).format(),
},
]
const performers = [
{
userId: 1,
displayName: 'Ryan',
},
{
userId: 2,
displayName: 'Sarah',
},
]
return (
<>
<Grid item xs={12} sm={6} data-aos-history-list>
<Box sx={{ borderRadius: 'sm', p: 2, boxShadow: 'md' }}>
<List sx={{ p: 0 }}>
{allHistory.map((historyEntry, index) => (
<div
data-aos-delay={100 * index + 200}
data-aos-anchor='[data-aos-history-list]'
data-aos='fade-right'
key={index}
>
<HistoryCard
allHistory={allHistory}
historyEntry={historyEntry}
key={index}
index={index}
performers={performers}
/>
</div>
))}
</List>
</Box>
</Grid>
<Grid item xs={12} sm={6} data-aos-history-demo-section>
<Card
sx={{
p: 4,
py: 6,
}}
data-aos-delay={200}
data-aos-anchor='[data-aos-history-demo-section]'
data-aos='fade-left'
>
<Typography level='h3' textAlign='center' sx={{ mt: 2, mb: 4 }}>
History with a purpose
</Typography>
<Typography level='body-lg' textAlign='center' sx={{ mb: 4 }}>
Keep track of all your chores and tasks with ease. Donetick records
due dates, completion dates, and who completed each task. Any notes
added to tasks are also tracked, providing a complete history for
your reference. Stay organized and informed with detailed task
tracking.
</Typography>
</Card>
</Grid>
</>
)
}
export default DemoHistory
