mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-01-26 11:54:11 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #29 from bluewave-labs/feat/DashboardMenu

Browse Source 
Implemented the Dashboard Menu.
This commit is contained in:
Skorpios
2024-05-14 10:24:02 -07:00
committed by GitHub
parent c5b93e7437 3ff8c65eb5
commit 5aa0c33432
5 changed files with 80 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
Client/package-lock.json generated
View File

@@ -11,7 +11,7 @@
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@fontsource/roboto": "^5.0.13",
"@mui/icons-material": "^5.15.16",
"@mui/icons-material": "^5.15.17",
"@mui/material": "^5.15.16",
"@mui/x-data-grid": "7.3.2",
"@mui/x-date-pickers": "7.3.2",
@@ -1127,9 +1127,9 @@
}
},
"node_modules/@mui/icons-material": {
"version": "5.15.16",
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.16.tgz",
"integrity": "sha512-s8vYbyACzTNZRKv+20fCfVXJwJqNcVotns2EKnu1wmAga6wv2LAo5kB1d5yqQqZlMFtp34EJvRXf7cy8X0tJVA==",
"version": "5.15.17",
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.17.tgz",
"integrity": "sha512-xVzl2De7IY36s/keHX45YMiCpsIx3mNv2xwDgtBkRSnZQtVk+Gqufwj1ktUxEyjzEhBl0+PiNJqYC31C+n1n6A==",
"dependencies": {
"@babel/runtime": "^7.23.9"
},

2
Client/package.json
View File

@@ -13,7 +13,7 @@
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@fontsource/roboto": "^5.0.13",
"@mui/icons-material": "^5.15.16",
"@mui/icons-material": "^5.15.17",
"@mui/material": "^5.15.16",
"@mui/x-data-grid": "7.3.2",
"@mui/x-date-pickers": "7.3.2",

15
Client/src/Components/DashboardMenu/index.css Normal file
View File

@@ -0,0 +1,15 @@
.icon-container {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.text-container {
display: flex;
align-items: center;
}
.dashboard-menu-text {
margin-left: 8px;
}

58
Client/src/Components/DashboardMenu/index.jsx Normal file
View File

@@ -0,0 +1,58 @@
import LanguageIcon from "@mui/icons-material/Language";
import ReportGmailerrorredIcon from "@mui/icons-material/ReportGmailerrorred";
import SensorsIcon from "@mui/icons-material/Sensors";
import SettingsIcon from "@mui/icons-material/Settings";
import AllInclusiveIcon from "@mui/icons-material/AllInclusive";
import SvgIcon from '@mui/material/SvgIcon';
import './index.css';
/**
* @component
* DashboardMenu component displays a menu with icons and corresponding text.
* Each menu item consists of an icon and a text label.
*
* @returns {JSX.Element} The JSX element representing the DashboardMenu component.
*/
function DashboardMenu() {
return (
<div className="dashboard-menu-container">
<div className="icon-container">
<SvgIcon component={LanguageIcon} />
<div className="text-container">
<span className="dashboard-menu-text">Monitors</span>
</div>
</div>
<div className="icon-container">
<SvgIcon component={ReportGmailerrorredIcon} />
<div className="text-container">
<span className="dashboard-menu-text">Incidents</span>
</div>
</div>
<div className="icon-container">
<SvgIcon component={SensorsIcon} />
<div className="text-container">
<span className="dashboard-menu-text">Status Pages</span>
</div>
</div>
<div className="icon-container">
<SvgIcon component={AllInclusiveIcon} />
<div className="text-container">
<span className="dashboard-menu-text">Integrations</span>
</div>
</div>
<div className="icon-container">
<SvgIcon component={SettingsIcon} />
<div className="text-container">
<span className="dashboard-menu-text">Settings</span>
</div>
</div>
</div>
);
}
export default DashboardMenu;

2
Client/src/Pages/Home/index.jsx
View File

@@ -1,6 +1,7 @@
import DropdownTeamMember from "../../Components/DropdownTeamMember";
import Search from "../../Components/Search";
import "./index.css";
import DashboardMenu from "../../Components/DashboardMenu";
const Home = () => {
return (
@@ -8,6 +9,7 @@ const Home = () => {
<div>Home</div>
<DropdownTeamMember />
<Search />
<DashboardMenu />
</>
);
};