sigit.io/src/pages/home/index.tsx

import {
  Add,
  CalendarMonth,
  Description,
  Draw,
  PersonOutline
} from '@mui/icons-material'
import { Box, Button, Typography } from '@mui/material'
import { useNavigate } from 'react-router-dom'
import { appPrivateRoutes } from '../../routes'
import styles from './style.module.scss'

export const HomePage = () => {
  const navigate = useNavigate()

  return (
    <Box className={styles.container}>
      <Box className={styles.header}>
        <Typography variant="h3" className={styles.title}>
          Sigits
        </Typography>
        <Box className={styles.actionButtons}>
          <Button
            variant="outlined"
            startIcon={<Draw />}
            onClick={() => navigate(appPrivateRoutes.sign)}
          >
            Sign
          </Button>
          <Button
            variant="contained"
            startIcon={<Add />}
            onClick={() => navigate(appPrivateRoutes.create)}
          >
            Create
          </Button>
        </Box>
      </Box>
      <PlaceHolder />
      <PlaceHolder />
      <PlaceHolder />
    </Box>
  )
}

const PlaceHolder = () => {
  return (
    <Box className={styles.submissions}>
      <Box className={styles.item}>
        <Box className={styles.titleBox}>
          <Typography variant="body1" className={styles.titleBoxItem}>
            <Description />
            Title
          </Typography>
          <Typography variant="body2" className={styles.titleBoxItem}>
            <PersonOutline />
            Sigit
          </Typography>
          <Typography variant="body2" className={styles.titleBoxItem}>
            <CalendarMonth />
            07 Jun 10:23 AM
          </Typography>
        </Box>
        <Box className={styles.signers}>
          <Box className={styles.signerItem}>
            <Typography variant="button" className={styles.status}>
              Sent
            </Typography>
            <Typography variant="body1">placeholder@sigit.io</Typography>
          </Box>
          <Box className={styles.signerItem}>
            <Typography variant="button" className={styles.status}>
              Awaiting
            </Typography>
            <Typography variant="body1">placeholder@sigit.io</Typography>
          </Box>
        </Box>
      </Box>
    </Box>
  )
}