REACT-1: Pantalla de inicio de sesion

OscarGarciaT · May 30, 2023 · ed6b03d · ed6b03d
1 parent 9fc5a20
commit ed6b03d
Show file tree

Hide file tree

Showing 12 changed files with 331 additions and 44 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,15 +1,16 @@
 module.exports = {
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
   ],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  settings: { react: { version: "18.2" } },
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': 'warn',
+    "react-refresh/only-export-components": "warn",
+    "react/prop-types": "off",
   },
-}
+};
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>DentelX - HOLA</title>
+    <title>DentelX</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,8 @@
   "dependencies": {
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.13.2",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.9",

diff --git a/public/assets/img/aura.png b/public/assets/img/aura.png
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,11 +1,34 @@
 import { BrowserRouter as Router } from "react-router-dom";
 
 import AppRouter from "./Components/AppRouter";
+import { CssBaseline, ThemeProvider, createTheme } from "@mui/material";
+
+const theme = createTheme({
+  palette: {
+    mode: "light",
+    primary: {
+      main: "#39CAB0",
+    },
+    secondary: {
+      main: "#CA5E39",
+    },
+    text: {
+      secondary: "#696969",
+    },
+  },
+  typography: {
+    fontFamily: "Poppins",
+    fontWeightMedium: 600,
+  },
+});
 
 function App() {
   return (
     <Router>
-      <AppRouter/>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <AppRouter />
+      </ThemeProvider>
     </Router>
   );
 }

diff --git a/src/Components/AppRouter.jsx b/src/Components/AppRouter.jsx
@@ -1,13 +1,28 @@
-import { Routes, Navigate, Route } from "react-router-dom";
+import { Routes, Navigate, Route, Outlet } from "react-router-dom";
 
 // Pages
 import Login from "../Pages/Login";
+import Placeholder from "../Pages/Placeholder";
+import DtxLayout from "./Navigation/DtxLayout";
 
 const AppRouter = () => {
   return (
     <Routes>
-      <Route path="/login2" element={<Login />} />
-      <Route path="*" element={<Navigate to="/" replace />} />
+      <Route
+        element={
+          <div>
+            <DtxLayout render={<Outlet />} />
+          </div>
+        }
+      >
+        <Route
+          path="/pacientes"
+          element={<Placeholder text={"Pantalla Pacientes"} />}
+        />
+        <Route path="/test" element={<Placeholder text={"Pantalla Test"} />} />
+      </Route>
+      <Route path="/login" element={<Login />} />
+      <Route path="*" element={<Navigate to="/login" replace />} />
     </Routes>
   );
 };

diff --git a/src/Components/Navigation/DtxLayout.jsx b/src/Components/Navigation/DtxLayout.jsx
@@ -0,0 +1,162 @@
+import { styled } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import Drawer from "@mui/material/Drawer";
+import MuiAppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import List from "@mui/material/List";
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import { Avatar, Icon } from "@mui/material";
+import { useEffect, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import SideBarItem from "./SideBarItem";
+
+const drawerWidth = 222;
+
+const Main = styled("main", { shouldForwardProp: (prop) => prop !== "open" })(
+  ({ theme, open }) => ({
+    flexGrow: 1,
+    transition: theme.transitions.create("margin", {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    marginLeft: `-${drawerWidth}px`,
+    ...(open && {
+      transition: theme.transitions.create("margin", {
+        easing: theme.transitions.easing.easeOut,
+        duration: theme.transitions.duration.enteringScreen,
+      }),
+      marginLeft: 0,
+    }),
+  })
+);
+
+const AppBar = styled(MuiAppBar, {
+  shouldForwardProp: (prop) => prop !== "open",
+})(({ theme, open }) => ({
+  backgroundColor: "white",
+  transition: theme.transitions.create(["margin", "width"], {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  ...(open && {
+    width: `calc(100% - ${drawerWidth}px)`,
+    marginLeft: `${drawerWidth}px`,
+    transition: theme.transitions.create(["margin", "width"], {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  }),
+}));
+
+const DrawerHeader = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  userSelect: "none",
+  ...theme.mixins.toolbar,
+  justifyContent: "center",
+}));
+
+const DtxLayout = ({ render }) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const [open, setOpen] = useState(false);
+
+  const profileImg = "no-image.png";
+  const currentPage = location?.pathname?.split?.("/")?.[1];
+
+  useEffect(() => {
+    setTimeout(() => {
+      setOpen(true);
+    }, 500);
+  }, []);
+
+  const handleDrawerToggle = () => {
+    setOpen((prevValue) => !prevValue);
+  };
+
+  const handleTestClick = () => {
+    navigate("/test", { replace: true });
+  };
+
+  const handlePacientesClick = () => {
+    navigate("/pacientes", { replace: true });
+  };
+
+  return (
+    <Box sx={{ display: "flex" }}>
+      <AppBar position="fixed" open={open}>
+        <Toolbar>
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            onClick={handleDrawerToggle}
+            edge="start"
+            sx={{ mr: 2, color: "#39CAB0" }}
+          >
+            <Icon>menu_open</Icon>
+          </IconButton>
+          <Box flexGrow={1} />
+          <IconButton>
+            <Icon sx={{ color: "#39CAB0" }}>notifications</Icon>
+          </IconButton>
+          <IconButton>
+            <Avatar src={profileImg} />
+          </IconButton>
+        </Toolbar>
+      </AppBar>
+      <Drawer
+        sx={{
+          width: drawerWidth,
+          flexShrink: 0,
+          "& .MuiDrawer-paper": {
+            width: drawerWidth,
+            boxSizing: "border-box",
+          },
+        }}
+        variant="persistent"
+        anchor="left"
+        open={open}
+      >
+        <DrawerHeader>
+          <img
+            src={"/assets/img/aura.png"}
+            alt="Aura"
+            onDragStart={(event) => event.preventDefault()}
+          />
+          <img
+            src={"/assets/img/Logo.png"}
+            alt="DentelX Logo"
+            className="mb-5"
+            onDragStart={(event) => event.preventDefault()}
+          />
+        </DrawerHeader>
+        <Divider />
+        <List>
+          <SideBarItem
+            onClick={handlePacientesClick}
+            currentPage={currentPage}
+            icon={<Icon>groups</Icon>}
+            label={"Pacientes"}
+            tabId={"pacientes"}
+          />
+          <SideBarItem
+            onClick={handleTestClick}
+            currentPage={currentPage}
+            icon={<Icon>bug_report</Icon>}
+            label={"Test page"}
+            tabId={"test"}
+          />
+        </List>
+      </Drawer>
+      <Main open={open}>
+        <DrawerHeader />
+        {render}
+      </Main>
+    </Box>
+  );
+};
+
+export default DtxLayout;
diff --git a/src/Components/Navigation/SideBarItem.jsx b/src/Components/Navigation/SideBarItem.jsx
@@ -0,0 +1,27 @@
+import {
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+} from "@mui/material";
+
+const SideBarItem = ({ onClick, currentPage, icon, label, tabId }) => {
+  return (
+    <ListItem
+      key={tabId}
+      sx={{
+        ...(currentPage === tabId
+          ? { backgroundColor: "#39CAB0", color: "#FFFDFD" }
+          : {}),
+      }}
+      disablePadding
+    >
+      <ListItemButton onClick={onClick}>
+        <ListItemIcon>{icon}</ListItemIcon>
+        <ListItemText primary={label} />
+      </ListItemButton>
+    </ListItem>
+  );
+};
+
+export default SideBarItem;