diff --git a/src/assets/images/ArrowRightIcon.js b/src/assets/images/ArrowRightIcon.js
new file mode 100644
index 0000000..cf56837
--- /dev/null
+++ b/src/assets/images/ArrowRightIcon.js
@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+
+const ArrowRightIcon = ({ width = 50, height = 24, color = '#007AFF', ...props }) => (
+
+);
+export default ArrowRightIcon;
+
+ArrowRightIcon.propTypes = {
+ width: PropTypes.string,
+ height: PropTypes.string,
+ color: PropTypes.string
+};
diff --git a/src/assets/images/SetupIcon.js b/src/assets/images/SetupIcon.js
new file mode 100644
index 0000000..b3cfed6
--- /dev/null
+++ b/src/assets/images/SetupIcon.js
@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+
+const SetupIcon = ({ width = 25, height = 24, color = '#292D32', ...props }) => (
+
+);
+export default SetupIcon;
+
+SetupIcon.propTypes = {
+ width: PropTypes.string,
+ height: PropTypes.string,
+ color: PropTypes.string
+};
diff --git a/src/components/TileComponent/Tile/index.js b/src/components/TileComponent/Tile/index.js
new file mode 100644
index 0000000..fc89335
--- /dev/null
+++ b/src/components/TileComponent/Tile/index.js
@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import ArrowRightIcon from 'assets/images/ArrowRightIcon';
+
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import useStyles from './styles';
+import LOGGER from 'services/Logger';
+
+export default function Tile({ data, children }) {
+ let [expand, setExpand] = useState(false);
+ const classes = useStyles();
+ return (
+ {
+ LOGGER.log(data.path);
+ }}
+ >
+
+
+
+ Update {data.name} {' '}
+
+
+ Add New {data.name} {' '}
+
+
+ Cycle Count {' '}
+
+
+ {data.name} List {' '}
+
+
+
+ );
+}
+
+Tile.propTypes = {
+ data: PropTypes.object,
+ children: PropTypes.node
+};
diff --git a/src/components/TileComponent/Tile/styles.js b/src/components/TileComponent/Tile/styles.js
new file mode 100644
index 0000000..b5d8f07
--- /dev/null
+++ b/src/components/TileComponent/Tile/styles.js
@@ -0,0 +1,88 @@
+import { makeStyles } from '@mui/styles';
+
+const useStyles = makeStyles({
+ root: {
+ backgroundColor: 'white',
+ borderRadius: '8px',
+ boxShadow: '0px 4px 24px #0000000d'
+ },
+ hoverChange: {
+ '&:hover': {
+ backgroundColor: '#007aff',
+ color: 'white',
+ '& svg': {
+ '& path': {
+ fill: '#fff'
+ }
+ }
+ }
+ },
+ row1: {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ borderRadius: '8px',
+ textAlign: 'center',
+ margin: '0 auto',
+ '& svg': {
+ marginBottom: '12px'
+ }
+ },
+ column: {
+ flexDirection: 'column'
+ },
+ row2: {
+ display: 'grid',
+ opacity: '1',
+ gridTemplateColumns: ' repeat(2, 1fr)',
+ gridTemplateRows: ' repeat(2, 1fr)',
+ fontSize: '14px'
+ },
+ box: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ padding: '13px 0 13px 10px',
+ borderTop: '1px solid lightgray',
+ '& svg': {
+ opacity: '0'
+ },
+ '&:hover': {
+ color: '#007aff',
+ cursor: 'pointer',
+ '& svg': {
+ opacity: '1'
+ }
+ }
+ },
+ boxEven: {
+ borderLeft: ' 1px solid lightgray'
+ },
+ content: {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ fontSize: '25px'
+ },
+ name: {
+ marginLeft: '5px',
+ fontSize: '20px'
+ },
+ row1Svg: {
+ alignItems: 'unset',
+ position: 'relative',
+ top: '15px',
+ '& svg': {
+ width: '30px',
+ height: '30px'
+ }
+ },
+ fullHeight: {
+ height: '230px'
+ },
+ remove: {
+ display: 'none'
+ }
+});
+
+export default useStyles;
diff --git a/src/components/TileComponent/TileGrid.js b/src/components/TileComponent/TileGrid.js
new file mode 100644
index 0000000..73d3ddc
--- /dev/null
+++ b/src/components/TileComponent/TileGrid.js
@@ -0,0 +1,78 @@
+import React, { useEffect, useRef } from 'react';
+import Box from '@mui/material/Box';
+import { makeStyles } from '@mui/styles';
+
+import SetupIcon from 'assets/images/SetupIcon';
+import Tile from './Tile';
+
+const useStyles = makeStyles({
+ menu: {
+ display: 'grid',
+ gap: '1.75rem',
+ backgroundColor: '#f9f9f9',
+ padding: '24px 48px',
+ '@media (max-width: 900px)': {
+ gridTemplateColumns: 'repeat(2, minmax(250px, auto)) !important'
+ },
+ '@media (max-width: 690px)': {
+ gridTemplateColumns: 'repeat(1, minmax(250px, auto)) !important'
+ }
+ }
+});
+
+
+// TODO: When using this component, please use props here instead.
+// The below code was left as a sample for testing.
+// Please also remove this comment when the above are complete
+export default function TileGrid() {
+ const classes = useStyles();
+ // to make the grid adjust its elemnts:
+ const myContainer = useRef(null);
+ let gridColumns = 2;
+ useEffect(() => {
+ const grid = myContainer.current;
+ const gridChild = grid.childElementCount;
+ gridColumns = Math.floor(Math.sqrt(gridChild));
+ grid.style.gridTemplateColumns = `repeat(${gridColumns}, minmax(250px, auto))`;
+ });
+ return (
+
+
+ {' '}
+
+
+
+ {' '}
+
+
+
+ {' '}
+
+
+
+ {' '}
+
+
+
+ {' '}
+
+
+
+ {' '}
+
+
+
+ {' '}
+
+
+
+ {' '}
+
+
+
+ {' '}
+
+
+
+ );
+}