src/views/SummaryCard.jsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import { Card, IconButton, Typography } from '@mui/joy'

const SummaryCard = () => {
  return (
    <Card>
      <div className='flex justify-between'>
        <div>
          <Typography level='h2'>Summary</Typography>
          <Typography level='body-xs'>
            This is a summary of your chores
          </Typography>
        </div>
        <IconButton>
          <MoreVert />
        </IconButton>
      </div>
      <div className='flex justify-between'>
        <div>
          <Typography level='h3'>Due Today</Typography>
          <Typography level='h1'>3</Typography>
        </div>
        <div>
          <Typography level='h3'>Overdue</Typography>
          <Typography level='h1'>1</Typography>
        </div>
      </div>
    </Card>
  )
}

export default SummaryCard