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

import {
  Add,
  CalendarMonth,
  Description,
  PersonOutline,
  Upload
} from '@mui/icons-material'
import { Box, Button, Tooltip, 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>
        {/* This is for desktop view */}
        <Box
          className={styles.actionButtons}
          sx={{
            display: {
              xs: 'none',
              md: 'flex'
            }
          }}
        >
          <Button
            variant="outlined"
            startIcon={<Upload />}
            onClick={() => navigate(appPrivateRoutes.sign)}
          >
            Upload
          </Button>
          <Button
            variant="contained"
            startIcon={<Add />}
            onClick={() => navigate(appPrivateRoutes.create)}
          >
            Create
          </Button>
        </Box>
        {/* This is for mobile view */}
        <Box
          className={styles.actionButtons}
          sx={{
            display: {
              xs: 'flex',
              md: 'none'
            }
          }}
        >
          <Tooltip title="Upload" arrow>
            <Button
              variant="outlined"
              onClick={() => navigate(appPrivateRoutes.sign)}
            >
              <Upload />
            </Button>
          </Tooltip>
          <Tooltip title="Create" arrow>
            <Button
              variant="contained"
              onClick={() => navigate(appPrivateRoutes.create)}
            >
              <Add />
            </Button>
          </Tooltip>
        </Box>
      </Box>
      <Box className={styles.submissions}>
        <PlaceHolder />
        <PlaceHolder />
        <PlaceHolder />
      </Box>
    </Box>
  )
}

const PlaceHolder = () => {
  return (
    <Box
      className={styles.item}
      sx={{
        flexDirection: {
          xs: 'column',
          md: 'row'
        }
      }}
    >
      <Box
        className={styles.titleBox}
        sx={{
          flexDirection: {
            xs: 'row',
            md: 'column'
          },
          borderBottomLeftRadius: {
            xs: 'initial',
            md: 'inherit'
          },
          borderTopRightRadius: {
            xs: 'inherit',
            md: 'initial'
          }
        }}
      >
        <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>
  )
}