component fix

package-lock.json

@@ -10968,6 +10968,36 @@
       }
     },
     "vue-loader-v16": {
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+<<<<<<< HEAD
+      "version": "npm:vue-loader@16.0.0-beta.7",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.7.tgz",
+      "integrity": "sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "@types/mini-css-extract-plugin": "^0.9.1",
+        "chalk": "^3.0.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^1.2.3",
+        "merge-source-map": "^1.1.0",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+=======
+>>>>>>> origin
+=======
+>>>>>>> origin
       "version": "npm:vue-loader@16.0.0-beta.8",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
       "integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
@@ -10986,13 +11016,38 @@
           "dev": true,
           "optional": true,
           "requires": {
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> origin
+>>>>>>> origin
+=======
+>>>>>>> origin
             "color-convert": "^2.0.1"
           }
         },
         "chalk": {
+<<<<<<< HEAD
+<<<<<<< HEAD
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
           "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+=======
+<<<<<<< HEAD
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+=======
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+>>>>>>> origin
+>>>>>>> origin
+=======
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+>>>>>>> origin
           "dev": true,
           "optional": true,
           "requires": {
@@ -11024,6 +11079,20 @@
           "dev": true,
           "optional": true
         },
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+<<<<<<< HEAD
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "optional": true
+=======
+>>>>>>> origin
+=======
+>>>>>>> origin
         "loader-utils": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
@@ -11035,6 +11104,13 @@
             "emojis-list": "^3.0.0",
             "json5": "^2.1.2"
           }
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> origin
+>>>>>>> origin
+=======
+>>>>>>> origin
         },
         "supports-color": {
           "version": "7.2.0",

src/components/SearchResultsPage.vue

@@ -0,0 +1,82 @@
+<template>
+<div class="container my-5">
+  <h4><b>Resultados para "{{productResult[0].searchText}}"</b></h4>
+  <p>Hay {{productResult[0].numberFound}} productos</p>
+  <div class="my-4 d-flex justify-content-sm-start justify-content-center flex-wrap">
+    <div class="card g-card-sty mr-4 mb-3" style="width: 12rem;">
+        <img v-bind:src="productResult[0].img" class="card-img-top" style="height:250px" alt="...">
+        <div class="card-body text-center" maxlength="5">
+            <p class="card-text">{{productResult[0].description}}</p>
+            <span><b>${{productResult[0].price}}</b></span>
+        </div>
+    </div>
+
+    <div class="card g-card-sty mr-4 mb-3" style="width: 12rem;">
+        <img v-bind:src="productResult[1].img" class="card-img-top" style="height:250px" alt="...">
+        <div class="card-body text-center">
+            <p class="card-text">{{productResult[1].description}}</p>
+            <span><b>${{productResult[1].price}}</b></span>
+        </div>
+    </div>
+
+    <div class="card g-card-sty mr-4 mb-3" style="width: 12rem;">
+        <img v-bind:src="productResult[2].img" class="card-img-top" style="height:250px" alt="...">
+        <div class="card-body text-center">
+            <p class="card-text">{{productResult[2].description}}</p>
+            <span><b>${{productResult[2].price}}</b></span>
+        </div>
+    </div>
+
+  </div>
+  <p>Mostrando {{productResult[0].numberFound}} de {{productResult[0].totalBookCategory}} artículo(s)</p>
+</div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            productResult: [
+                {
+                searchText: "Lorem ipsum",
+                numberFound: 3,
+                description: "Some quick example text to build on the card title and...",
+                price: 180,
+                totalBookCategory: 28,
+                img: 'https://images.cdn3.buscalibre.com/fit-in/360x360/7d/92/7d92cb1e49ff2d7756f192114e5c8901.jpg'
+                },
+                  {
+                searchText: "Lorem ipsum",
+                numberFound: 3,
+                description: "2 Some quick example text to build on the card title and...",
+                price: 190,
+                totalBookCategory: 28,
+                img: 'https://m.media-amazon.com/images/I/51HdyT9COEL.jpg'
+                },
+                  {
+                searchText: "Lorem ipsum",
+                numberFound: 3,
+                description: "3 Some quick example text to build on the card title and...",
+                price: 200,
+                totalBookCategory: 28,
+                img: 'https://upload.wikimedia.org/wikipedia/commons/8/8e/Lenin_book_1902.jpg'
+                }
+            ]
+        }
+    }
+}
+</script>
+
+<style scoped>
+.g-card-sty {
+    -webkit-box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
+    -moz-box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
+    box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
+}
+  p {
+      text-overflow: ellipsis;
+      width: 100%;
+      white-space: nowrap;
+      overflow: hidden; 
+    } 
+</style>

src/view/Home.vue

@@ -2,7 +2,7 @@
 <div>
 <Header></Header>
 
-<Cart></Cart>
+<SearchResultsPage></SearchResultsPage>
 
 <Footer></Footer>
 </div>
@@ -11,13 +11,13 @@
 <script>
 
 import Header from '../components/Header'
-import Cart from '../components/Cart'
+import SearchResultsPage from '../components/SearchResultsPage'
 import Footer from '../components/Footer'
         
 export default {
 components: {
         Header,
-        Cart,
+        SearchResultsPage,
         Footer
     }
 }