botones principal

healthmanager/src/Principal.css

@@ -29,7 +29,6 @@ body{
     font-family:Georgia, 'Times New Roman', Times, serif;
   }
   #boxCerrar{
-    padding-top: 20px;
     margin-left: auto;
     margin-right: 100px;
   }
@@ -41,19 +40,15 @@ body{
   #headerForm {
     font-size: small;
   }
-  #divBotones{
-    display:flex;
-    justify-content: center;
-    align-items: center;
-  }
-  #botonMiPerfil,#botonMisPublicaciones,#botonNuevaPublicacion{
-    width: 300px;
-    height: 300px;
-    margin: 20px;
-  }
   #divMenu {
     font-family:Arial, Helvetica, sans-serif;
     margin-left: auto;
     margin-right: 150px;
     padding: 10px;
   }
+#cerrarSesion{
+  align-items: center;
+}
+#divBotones{
+  padding-top: 30px;
+}

healthmanager/src/Principal.jsx

@@ -1,24 +1,36 @@
 /* eslint-disable no-unused-vars */
-import { Button, Box, TextField, DialogContentText, Divider } from "@mui/material"
+import {
-import axios from "axios"
+  Button,
-import {useEffect,useState } from "react"
+  Box,
-import './Principal.css'
+  TextField,
-import { useNavigate } from 'react-router-dom'
+  DialogContentText,
+  Divider,
+} from "@mui/material";
+import { styled } from "@mui/material/styles";
+import ButtonBase from "@mui/material/ButtonBase";
+import Typography from "@mui/material/Typography";
+import axios from "axios";
+import { useEffect, useState } from "react";
+import "./Principal.css";
+import { useNavigate } from "react-router-dom";
 function Principal(props) {
   const navigate = useNavigate();
   const [publicacionesData, setPublicacionesData] = useState([]);
   // eslint-disable-next-line no-unused-vars
-    const [Cargando, setCargando] = useState (false)
+  const [Cargando, setCargando] = useState(false);
-    const correoUsuario = window.localStorage.getItem('Usuario');
+  const correoUsuario = window.localStorage.getItem("Usuario");
 
   const datosUsuario = async () => {
     try {
-            const respuesta=await axios.get("https://back-endproyectofinal8-production-a397.up.railway.app/datosUsuario",{params:{correo: correoUsuario}});
+      const respuesta = await axios.get(
+        "https://back-endproyectofinal8-production-a397.up.railway.app/datosUsuario",
+        { params: { correo: correoUsuario } }
+      );
       return respuesta.data;
     } catch (error) {
       console.log(error);
     }
-    }
+  };
 
   const UsuarioData = async () => {
     try {
@@ -31,30 +43,32 @@ function Principal(props) {
       console.log("holaa");
       console.log(error);
     }
-    }
+  };
   UsuarioData();
 
   const cerrarSesion = () => {
-        navigate('/');
+    navigate("/");
-    }
+  };
 
   const miPerfil = () => {
-        navigate('/MiPerfil');
+    navigate("/MiPerfil");
-    }
+  };
 
   const publicaciones = () => {
-        navigate('/Publicaciones')
+    navigate("/Publicaciones");
-    }
+  };
 
   const crearPublicacion = () => {
-        navigate('/CrearPublicacion');
+    navigate("/CrearPublicacion");
-    }
+  };
 
   useEffect(() => {
     const fetchData = async () => {
       // eslint-disable-next-line no-useless-catch
       try {
-                const res = await axios.get("https://back-endproyectofinal8-production-a397.up.railway.app/Publicaciones");
+        const res = await axios.get(
+          "https://back-endproyectofinal8-production-a397.up.railway.app/Publicaciones"
+        );
         console.log("Publicaciones data: ", res.data);
         setPublicacionesData(res.data);
       } catch (error) {
@@ -64,30 +78,153 @@ function Principal(props) {
     fetchData();
   }, []);
 
-    const usuarioSesion = window.localStorage.getItem('ID');
+  const usuarioSesion = window.localStorage.getItem("ID");
 
+  const images = [
+    {
+      url: "https://th.bing.com/th/id/R.c691ed37c9ce3040c3ebd2892e88870c?rik=QUBcFflN%2b9oqPQ&pid=ImgRaw&r=0",
+      title: "Mis recetas",
+      width: "33%",
+    },
+    {
+      url: "https://th.bing.com/th/id/R.c691ed37c9ce3040c3ebd2892e88870c?rik=QUBcFflN%2b9oqPQ&pid=ImgRaw&r=0",
+      title: "Mi perfil",
+      width: "33%",
+    },
+    {
+      url: "https://th.bing.com/th/id/R.c691ed37c9ce3040c3ebd2892e88870c?rik=QUBcFflN%2b9oqPQ&pid=ImgRaw&r=0",
+      title: "Cerrar Sesion",
+      width: "33%",
+    },
+  ];
+
+  const ImageButton = styled(ButtonBase)(({ theme }) => ({
+    position: "relative",
+    height: 510,
+    [theme.breakpoints.down("sm")]: {
+      width: "100% !important", // Overrides inline-style
+      height: 100,
+    },
+    "&:hover, &.Mui-focusVisible": {
+      zIndex: 1,
+      "& .MuiImageBackdrop-root": {
+        opacity: 0.15,
+      },
+      "& .MuiImageMarked-root": {
+        opacity: 0,
+      },
+      "& .MuiTypography-root": {
+        border: "4px solid currentColor",
+      },
+    },
+  }));
+
+  const ImageSrc = styled("span")({
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    backgroundSize: "cover",
+    backgroundPosition: "center 40%",
+  });
+
+  const Image = styled("span")(({ theme }) => ({
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: theme.palette.common.white,
+  }));
+
+  const ImageBackdrop = styled("span")(({ theme }) => ({
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    backgroundColor: theme.palette.common.black,
+    opacity: 0.4,
+    transition: theme.transitions.create("opacity"),
+  }));
+
+  const ImageMarked = styled("span")(({ theme }) => ({
+    height: 3,
+    width: 18,
+    backgroundColor: theme.palette.common.white,
+    position: "absolute",
+    bottom: -2,
+    left: "calc(50% - 9px)",
+    transition: theme.transitions.create("opacity"),
+  }));
+
+  //<Button id="botonMiPerfil" variant="contained" type="button" color="primary"  disabled={Cargando} onClick={miPerfil}>Mi perfil</Button>
+  //<Button id="botonMisPublicaciones" variant="contained" type="submit" color="primary"  disabled={Cargando} onClick={publicaciones}>Mis recetas</Button>
+  //<h1 id="headerPublicaciones">Menu Principal</h1>
   return (
-
     <>
       <div>
-                <h1 id="headerFacultad">Health Manager</h1>
+        <h1 id="headerFacultad">Health Manager - Menu Principal</h1>
         <Divider />
         <div id="divPublicaciones">
-                    <h1 id="headerPublicaciones">Menu Principal</h1>
           <h1 id="bienvenidoUsuario">¡Hola {usuarioSesion}! </h1>
           <Box id="boxCerrar" m={0}>
-                        <Button id="cerrarSesion" variant="contained" type="submit" color="warning" onClick={cerrarSesion}>Cerrar sesion</Button>
+            <Button id="cerrarSesion"
+              variant="contained"
+              type="submit"
+              color="warning"
+              onClick={cerrarSesion}>
+              Cerrar sesion
+            </Button>
           </Box>
         </div>
         <Divider />
         <div id="divBotones">
-                        <Button id="botonMiPerfil" variant="contained" type="button" color="primary"  disabled={Cargando} onClick={miPerfil}>Mi perfil</Button>
+          <Box
-                        <Button id="botonMisPublicaciones" variant="contained" type="submit" color="primary"  disabled={Cargando} onClick={publicaciones}>Mis recetas</Button>
+            sx={{
-                        <Button id="botonNuevaPublicacion" variant="contained" type="submit" color="primary"  disabled={Cargando} onClick={crearPublicacion}>Otros</Button>
+              display: "flex",
+              flexWrap: "wrap",
+              minWidth: 300,
+              width: "100%",
+            }}
+          >
+            {images.map((image) => (
+              <ImageButton
+                focusRipple
+                key={image.title}
+                style={{
+                  width: image.width,
+                }}
+              >
+                <ImageSrc style={{ backgroundImage: `url(${image.url})` }} />
+                <ImageBackdrop className="MuiImageBackdrop-root" />
+                <Image>
+                  <Typography
+                    component="span"
+                    variant="subtitle1"
+                    color="inherit"
+                    sx={{
+                      position: "relative",
+                      p: 4,
+                      pt: 2,
+                      pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,
+                    }}
+                  >
+                    {image.title}
+                    <ImageMarked className="MuiImageMarked-root" />
+                  </Typography>
+                </Image>
+              </ImageButton>
+            ))}
+          </Box>
         </div>
       </div>
     </>
-    )
+  );
 }
 
-export default Principal
+export default Principal;