Ivanchuk03 · CristianQCH · Oct 27, 2023 · Oct 28, 2023 · Dec 8, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5501
+    "editor.fontFamily": "'Fira Code', monospace"
 }
diff --git a/Ecommerce/index.html b/Ecommerce/index.html
@@ -6,14 +6,9 @@
     <title>Tecno Compra</title>
     <link rel="stylesheet" href="./index.css">
     <link rel="website icon"  type="png" href="./src/assets/img/LOGO-removebg-preview (1).png">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
-
-    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
   </body>
 </html>
diff --git a/Ecommerce/package-lock.json b/Ecommerce/package-lock.json
diff --git a/Ecommerce/package.json b/Ecommerce/package.json
@@ -10,10 +10,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.16",
+    "axios": "^1.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
-    "react-router-dom": "^6.16.0"
+    "react-router-dom": "^6.16.0",
+    "swiper": "^10.3.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
@@ -24,5 +30,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "vite": "^4.4.5"
-  }
+  },
+  "tags": [
+    "swiper"
+  ]
 }
diff --git a/Ecommerce/public/vite.svg b/Ecommerce/public/vite.svg
diff --git a/Ecommerce/src/App.css b/Ecommerce/src/App.css
@@ -1,18 +1,8 @@
 @font-face {
-  font-family: "Monserrat";
+  font-family: "Montserrat";
   src: url(./assets/font/Montserrat-VariableFont_wght.ttf);
 }
 
 *{
-  font-family: "Monserrat";
-}
-header{
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  padding-top: 20px;
-  padding-bottom: 20px;
-  background-color: white;
-
-}
-
+  font-family: "Montserrat";
+}
diff --git a/Ecommerce/src/App.jsx b/Ecommerce/src/App.jsx
@@ -1,46 +1,49 @@
 import { useEffect, useState } from 'react'
+
 import Footer from "../src/components/footer"
 import Header from './components/header'
 import './App.css'
 import Navbar from './components/navbar'
 
 function App() {
-  const [product, setProducts] = useState([])
+  const [products, setProducts] = useState([])
   const [searchProduct, setSearchProducts] = useState("")
+  const [listUpdated, setListUpdated] = useState(false)
+
 
-  const url = 'https://api.npoint.io/80b11121a2406aef6490'
+  const url = 'http://localhost:3001/products'
 
   const handleChangeProducts = (product) => {
     setSearchProducts(product.target.value)
   }
-
+  //aplique cambios aqui
   useEffect(() => {
-    fetch(url)
+    const getAll = () => {
+      fetch(url)
         .then((res)=> (res.json()))
-        .then((res)=> setProducts(res.products));
-  },[]);
-
+        .then((res)=> setProducts(res));
+    }
+    getAll()
+    setListUpdated(false)
+  },[listUpdated]);
 
+
   return (
     <>
       <header>
           <Header onChangeProduct={handleChangeProducts}/>
-        </header>
-        <Navbar products={product} key={product.id} searchProducts={searchProduct}/>
+      </header>
+        <Navbar products={products} key={products.id} searchProducts={searchProduct} setListUpdated={setListUpdated}/>
+
         <footer>
               <Footer/>
         </footer>
+
     </>
-
-
-
-
-
-
   )
 }
 
-export default App
+export default App;
 
 
 
diff --git a/Ecommerce/src/Style/Footer.css b/Ecommerce/src/Style/Footer.css
@@ -1,25 +1,25 @@
 .footer{
     display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
+    justify-content: center;
     align-items: center;
-    background-color: #0979b0;
+    column-gap: 3rem;
+    background-color: #29aaeb;
     color: white;
     padding: 2rem 0px;
 }
 .btn1{
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
-
+    row-gap: 0.5rem;
+    height: 107px;
 }
 .btn2{
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
     align-items: center;
-    gap: 1rem;
+    row-gap: 0.5rem;
+    height: 107px;
 }
 .separadores{
     background-color: #eee;
@@ -29,12 +29,55 @@
 .numeroInvicible{
     visibility: hidden;
 }
-.textBtn{
-    color: white;
+
+.btn1 p{
+    text-align: center;
 }
+/*---------------------------------Botones-----------------------------------*/
+
 .btn1 button, .btn2 button{
-    background-color: #0cb7f2;
+    background-color: transparent;
+    font-size: 15.5px;
+    color: white;
+    border: 1px solid white;
+    border-radius: 5px;
+    padding: 5px 8px;
+}
+
+.btn1 button:hover{
+    background-color: white;
+    cursor: pointer;
+    color: #0979b0;
+} 
+
+.btn2 button:hover{
+    background-color: white;
+    cursor: pointer;
+    color: #0979b0;
+
 }
+
 .btn1 a{
     color: black;
+}
+
+/*--------------------------Redes sociales--------------------------*/
+.social_media{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 1rem;  
+    height: 107px;
+}
+.iconos_socialMedia{
+    display: flex;
+    column-gap: 5px;      
+}
+
+.iconos_socialMedia div{
+    border: 3px solid white;
+    border-radius: 50%;
+    padding: 6px;
+    display: flex;
+    align-items: center;
 }
diff --git a/Ecommerce/src/Style/Header.css b/Ecommerce/src/Style/Header.css
@@ -1,33 +1,55 @@
-button{
-    border: none; 
-    padding: 14px 28px; 
-    cursor: pointer; 
-    border-radius: 5px;
-
-}
-
 .headerContainer{
     display: flex;
-    flex-direction: row;
     flex-basis: 100%;
-    justify-content: space-around;
+    justify-content: center;
     align-items: center;
+    column-gap: 1.7rem;
+    background-color: white;
+    margin: 0.5rem 0 0 0;
+    height: 125px;
 }
-.logo{
-    width: 200px;
+
+.logo_img{
+    width: 250px;
     height: 5rem;
+
+    /*
+    position: absolute;
+    top: 0px;
+    left: 16.7rem; 
+    */
 }
-.logo img{
+.logo_img img{
     width: 100%;
     height: 100%;
     object-fit: contain;
 }
+
+/*Al div con clase searchT le doy un display flex para poder acomodar la lupa en el centro y luego llevarla 
+a la posicion que quiero*/
+
+.searchT{
+    display: flex;
+    align-items: center;
+    margin-left: 1rem;
+}
+
 .startSesion{
-    background-color: #0cb7f2;
+    background-color: #29aaeb;
+    width: 173.96px;
+    height: 36px;
+    display: flex;
+    justify-content: center;
+    border: 1px solid white;
+    border-radius: 5px;
+    cursor: pointer;
+}
+.startSesion button{
+    font-size: 14px;
+    background-color: #29aaeb;
     color: white;
-    font-size: 16px;
-    padding: 10px 28px;
+    border: none;
+    cursor: pointer;
 }
 
 
-
diff --git a/Ecommerce/src/Style/Products.css b/Ecommerce/src/Style/Products.css
@@ -1,12 +1,10 @@
-
 .products{
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     background-color: #eee;
     flex-direction: column;
-    background-color: #eee;
     padding: 2rem 0px;
 }
 
@@ -52,4 +50,47 @@
     object-fit: contain;
     background: #fff;
     padding: 10px 0px;
-}
+}
+
+.nm-3{
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: center;
+    padding-top: 10px;
+    gap: 5px;
+}
+.nm-3 .btnDel{
+    background-color: red;
+}
+.nm-3 .btnUp{
+    background-color: green;
+}
+
+/*------------------Este código es para hacer la flecha de volver arriba-------------------*/
+
+
+
+/*La flecha tiene esta clase para hacerla invisible.*/
+.invisible_arrow{
+visibility         : hidden; 
+}
+
+/*Agrego esta clase para hacer que la flecha este visible.*/
+.visible_arrow{
+    visibility       : visible; /*Esa propiedad hace que la visibilidad de la flecha sea visible*/
+    background-color : aqua;
+    width            : 60px;
+    height           : 60px;
+    border-radius    : 50%;
+    cursor           : pointer;
+    padding-right    : 1px;
+
+    display          : flex;
+    justify-content  : center;
+    align-items      : center;
+
+    position         : fixed;
+    bottom           : 2rem;
+    right            : 5.5rem;
+}
+/*--------------------------------------------------------------------------------------------------------------*/