Add DataGrid

Client/src/App.jsx

@@ -1,24 +1,23 @@
-
-import { Routes, Route } from 'react-router-dom'
-import './App.css'
-import NotFound from './Pages/NotFound'
-import Login from './Pages/Login'
-import Register from './Pages/Register'
-import HomeLayout from './Layouts/HomeLayout'
-
+import { Routes, Route } from "react-router-dom";
+import "./App.css";
+import NotFound from "./Pages/NotFound";
+import Login from "./Pages/Login";
+import Register from "./Pages/Register";
+import HomeLayout from "./Layouts/HomeLayout";
+import Demo from "./Pages/Demo/Demo";
 
 function App() {
   return (
     <>
       <Routes>
-        <Route exact path='/' element={<HomeLayout />} />
-        <Route exact path='/register' element={<Register />} />
-        <Route exact path='/login' element={<Login />} />
-        <Route path='*' element={<NotFound />} />
+        <Route exact path="/" element={<HomeLayout />} />
+        <Route exact path="/register" element={<Register />} />
+        <Route exact path="/login" element={<Login />} />
+        <Route exact path="/demo" element={<Demo />} />
+        <Route path="*" element={<NotFound />} />
       </Routes>
     </>
-  )
+  );
 }
 
-export default App
-
+export default App;

Client/src/Components/Label/BaseLabel.css

@@ -3,4 +3,5 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
+  line-height: normal;
 }

Client/src/Pages/Demo/Demo.jsx

@@ -0,0 +1,182 @@
+import React from "react";
+import Button from "../../Components/Button";
+import Link from "../../Components/Link";
+import ColoredLabel from "../../Components/Label/ColoredLabel";
+import {
+  useTheme,
+  Switch,
+  Checkbox,
+  FormControl,
+  FormLabel,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+} from "@mui/material";
+import StatusLabel from "../../Components/Label/StautsLabel";
+import Avatar from "../../Components/Avatar/Avatar";
+import avatarImage from "../../assets/Images/avatar_placeholder.png";
+import { DataGrid } from "@mui/x-data-grid";
+
+const cols = [
+  {
+    field: "name",
+    headerName: "Name",
+    renderCell: (params) => {
+      return (
+        <div style={{ display: "flex", alignItems: "center" }}>
+          <Avatar
+            src={params.value.avatarImage}
+            firstName={params.value.firstName}
+            lastName={params.value.lastName}
+          />
+          <div style={{ marginLeft: "1rem" }}>
+            {params.value.firstName} {params.value.lastName}
+          </div>
+        </div>
+      );
+    },
+    flex: 1,
+  },
+  {
+    field: "status",
+    headerName: "Status",
+    renderCell: (params) => {
+      return <StatusLabel status={params.value} />;
+    },
+    flex: 1,
+  },
+  { field: "role", headerName: "Role", flex: 1 },
+  { field: "team", headerName: "Team", flex: 1 },
+  { field: "hireDate", headerName: "Hire date", flex: 1 },
+];
+
+const rows = ((count) => {
+  const arr = [];
+  for (let i = 0; i < count; i++) {
+    let row = {
+      id: i,
+      name: {
+        avatarImage: i % 2 === 0 ? avatarImage : null,
+        firstName: "Placeholder Name",
+        lastName: i,
+      },
+      status: "Active",
+      role: "Product Designer",
+      team: "Marketing",
+      hireDate: new Date().toLocaleDateString(),
+    };
+    arr.push(row);
+  }
+  return arr;
+})(100);
+
+const Demo = () => {
+  const [radio, setRadio] = React.useState(1);
+
+  const handleRadio = (event) => {
+    setRadio(event.target.value);
+  };
+
+  const change = (event, type) => {
+    alert(event.target.checked ? `${type} checked` : `${type} unchecked`);
+  };
+
+  const theme = useTheme();
+  return (
+    <div>
+      <h4>Buttons</h4>
+      <div>
+        <Button level="primary" label="Primary" />
+        <Button level="secondary" label="Secondary" />
+        <Button level="tertiary" label="Tertiary" />
+        <Button level="error" label="Error" />
+      </div>
+      <h4>Disabled Buttons</h4>
+      <div>
+        <Button level="primary" label="Primary" disabled />
+        <Button level="secondary" label="Secondary" disabled />
+        <Button level="tertiary" label="Tertiary" disabled />
+        <Button level="error" label="Error" disabled />
+      </div>
+      <div>
+        <Link
+          level="tertiary"
+          label="Tertiary Link"
+          url={"https://www.google.com"}
+        />
+      </div>
+      <h4>Labels</h4>
+      <div>
+        <ColoredLabel label="Label" color={theme.palette.labelGray.color} />
+        <ColoredLabel label="Label" color={theme.palette.labelPurple.color} />
+        <ColoredLabel label="Label" color={theme.palette.labelGreen.color} />
+        <ColoredLabel label="Label" color={theme.palette.labelOrange.color} />
+      </div>
+
+      <h4>Status Lables</h4>
+      <div>
+        <StatusLabel status="Seen" />
+        <StatusLabel status="Waiting" />
+        <StatusLabel status="New" />
+        <StatusLabel status="Active" />
+      </div>
+      <h4>Avatar</h4>
+      <div style={{ display: "flex" }}>
+        <Avatar src={avatarImage} firstName="Alex" lastName="Holliday" />
+        <Avatar firstName="Alex" lastName="Holliday" />
+        <Avatar src={avatarImage} firstName="Alex" lastName="Holliday" small />
+        <Avatar firstName="Alex" lastName="Holliday" small />
+      </div>
+      <h4>Switches</h4>
+      <div>
+        <Switch onChange={(event) => change(event, "Switch")} />
+        <Switch size="small" />
+        <Switch disabled />
+        <Switch checked />
+      </div>
+      <h4>Checkboxes</h4>
+      <div>
+        <Checkbox onChange={(event) => change(event, "Checkbox")} />
+        <Checkbox size="small" />
+        <Checkbox disabled />
+        <Checkbox checked />
+      </div>
+      <h4>Radio</h4>
+      <div>
+        <FormControl>
+          <FormLabel>Demo Radio</FormLabel>
+          <RadioGroup value={radio} onChange={handleRadio}>
+            <div>
+              <FormControlLabel value={1} control={<Radio />} label="1" />
+              <FormControlLabel value={2} control={<Radio />} label="2" />
+              <FormControlLabel
+                value={3}
+                control={<Radio size="small" />}
+                label="3"
+              />
+              <FormControlLabel
+                value={4}
+                control={<Radio disabled />}
+                label="4"
+              />
+            </div>
+          </RadioGroup>
+        </FormControl>
+      </div>
+      <h4>Table</h4>
+      <div style={{ height: "400px", width: "50vw" }}>
+        <DataGrid
+          autoHeight
+          columns={cols}
+          rows={rows}
+          initialState={{
+            pagination: {
+              paginationModel: { page: 0, pageSize: 10 },
+            },
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+export default Demo;

Client/src/Pages/Home/index.jsx

@@ -1,69 +1,11 @@
 import DropdownTeamMember from "../../Components/DropdownTeamMember";
 import "./index.css";
-import Button from "../../Components/Button";
-import Link from "../../Components/Link";
-import ColoredLabel from "../../Components/Label/ColoredLabel";
-import { useTheme } from "@mui/material";
-import StatusLabel from "../../Components/Label/StautsLabel";
-import Avatar from "../../Components/Avatar/Avatar";
-import avatarImage from "../../assets/Images/avatar_placeholder.png";
 
 const Home = () => {
-  const theme = useTheme();
   return (
     <>
       <div>Home</div>
       <DropdownTeamMember />
-      <div>
-        <h4>Buttons</h4>
-        <div>
-          <Button level="primary" label="Primary" />
-          <Button level="secondary" label="Secondary" />
-          <Button level="tertiary" label="Tertiary" />
-          <Button level="error" label="Error" />
-        </div>
-        <h4>Disabled Buttons</h4>
-        <div>
-          <Button level="primary" label="Primary" disabled />
-          <Button level="secondary" label="Secondary" disabled />
-          <Button level="tertiary" label="Tertiary" disabled />
-          <Button level="error" label="Error" disabled />
-        </div>
-        <div>
-          <Link
-            level="tertiary"
-            label="Tertiary Link"
-            url={"https://www.google.com"}
-          />
-        </div>
-        <h4>Labels</h4>
-        <div>
-          <ColoredLabel label="Label" color={theme.palette.labelGray.color} />
-          <ColoredLabel label="Label" color={theme.palette.labelPurple.color} />
-          <ColoredLabel label="Label" color={theme.palette.labelGreen.color} />
-          <ColoredLabel label="Label" color={theme.palette.labelOrange.color} />
-        </div>
-
-        <h4>Status Lables</h4>
-        <div>
-          <StatusLabel status="Seen" />
-          <StatusLabel status="Waiting" />
-          <StatusLabel status="New" />
-          <StatusLabel status="Active" />
-        </div>
-        <h4>Avatar</h4>
-        <div style={{ display: "flex" }}>
-          <Avatar src={avatarImage} firstName="Alex" lastName="Holliday" />
-          <Avatar firstName="Alex" lastName="Holliday" />
-          <Avatar
-            src={avatarImage}
-            firstName="Alex"
-            lastName="Holliday"
-            small
-          />
-          <Avatar firstName="Alex" lastName="Holliday" small />
-        </div>
-      </div>
     </>
   );
 };