Se quita anchor tag a button de la sección main y se realizan las rut…

…as del button de main a /lo-nuevo y de /lo-nuevo a /home
frontendcafe · Sep 23, 2021 · 12e74eb · 12e74eb
1 parent c6d8b4f
commit 12e74eb
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 24 deletions.
diff --git a/src/App.js b/src/App.js
@@ -5,7 +5,6 @@ import Sucursales from "./views/sucursales/index.js"
 import Gallery from './components/Gallery/index';
 import AboutUS from './views/aboutUS';
 import News from './views/news';
-import CardMainDesktop from "./components/CardMainDesktop";
 import { useState } from 'react';
 import {
   BrowserRouter as Router,
@@ -27,8 +26,6 @@ function App() {
       <Navbar></Navbar>
       <Switch>
         <Route path="/home" exact>
-
-        <CardMainDesktop />
           <Main />
           <Information handleClick={handleClick} moreInfo={moreInfo} />
           {moreInfo ? <Sucursales /> : null }
@@ -41,8 +38,6 @@ function App() {
           <News></News>
         </Route>
         <Route path="/" exact>
-
-        <CardMainDesktop />
           <Main />
           <Information handleClick={handleClick} moreInfo={moreInfo} />
           {moreInfo ? <Sucursales /> : null }
@@ -61,4 +56,4 @@ function AppWithProviders() {
   );
 }
 
-export default AppWithProviders;
+export default AppWithProviders;
diff --git a/src/components/CardMainDesktop/index.js b/src/components/CardMainDesktop/index.js
@@ -1,10 +1,18 @@
 import React from 'react';
 import './styles.scss';
+import { useHistory } from 'react-router';
 import { card } from './data';
 import image from '../../assets/imagen-card-main.png';
 import Button from "../Button";
 
 const CardMainDesktop = () => {
+
+    const history = useHistory();
+
+    const handleClick = () => {
+        history.push("/home")
+    }
+
     return (
         <div className="card-main">
             <div className="card-main__container">
@@ -45,7 +53,7 @@ const CardMainDesktop = () => {
                     <p>Uno de los problemas es que beber vino de arándano puede llegar a convertirse en adictivo con el tiempo. Los amantes de este vino, por lo tanto, tienen que aprender a <span>consumirlo con moderación</span>. Para conservarlo una vez abierto, lo mejor es volverlo a tapar con el corcho y asegurarse de que no queda expuesto al aire.</p>
                 </div>
 
-                <Button variant="secondary" text="Volver" clases='card-container__button'></Button>
+                <Button variant="secondary" text="Volver" clases='card-container__button' onClick={handleClick}></Button>
             </div>
         </div>
     )

diff --git a/src/components/CardMainMobile/index.js b/src/components/CardMainMobile/index.js
@@ -9,7 +9,7 @@ function CardMainMobile() {
         <div className = "card-container">
             <div className = "card-container__main">
                 <h1 className = "card-container__main--title">
-                   {card.title}
+                    {card.title}
                 </h1>
                 <p className = "card-container__main--paragraph">
                     {card.description}
@@ -30,11 +30,9 @@ function CardMainMobile() {
                 </div>
             )}
             </div>
-            <a href="">
-                <Button variant="secondary" text="Volver" clases='card-container__button'></Button>
-            </a>
+            <Button variant="secondary" text="Volver" clases='card-container__button'></Button>
         </div>
-     );
+    );
 }
 
 export default CardMainMobile;
diff --git a/src/components/CardMainMobile/style.scss b/src/components/CardMainMobile/style.scss
@@ -1,7 +1,8 @@
 @use 'src/styles/utils' as *;
 
 .card-container {
-  background-color: white;
+  background-color: $color-bg;
+  margin-top: 20px;
   &__main {
     &--title {
       font-style: normal;

diff --git a/src/components/Main/index.js b/src/components/Main/index.js
@@ -2,8 +2,16 @@ import React from "react";
 import "./style.scss";
 import imagen from "../../assets/portada.png";
 import Button from "../Button";
+import { useHistory } from 'react-router';
+
 
 function Main() {
+  const history = useHistory();
+
+  const handleClick = () => {
+      history.push("/lo-nuevo")
+  }
+
   return (
     <main className="main">
       <div className="main__texto">
@@ -22,9 +30,7 @@ function Main() {
             la nuestra tampoco... <br />
           </span>
         </h1>
-        <a href="#">
-          <Button variant="primary" text="Conocé lo nuevo"></Button>
-        </a>
+        <Button variant="primary" text="Conocé lo nuevo" onClick={handleClick} ></Button>
       </div>
       <div className="main__img">
         <img

diff --git a/src/components/Main/style.scss b/src/components/Main/style.scss
@@ -46,14 +46,6 @@
       letter-spacing: 0.05em;
       height: 58px;
     }
-
-    a {
-      button {
-        z-index: 2;
-        margin-left: 25vw;
-        top: 82vh;
-      }
-    }
   }