#31 product card link

Scout-NU · May 7, 2021 · 97eba93 · 97eba93
1 parent 7a8276e
commit 97eba93
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/src/components/product_page/product-page-styles.js b/src/components/product_page/product-page-styles.js
@@ -34,6 +34,11 @@ export const ProductsHeading = styled.div`
   color: ${colors.blue900};
 `
 
+export const ProductCard = styled.a`
+  color: ${colors.blue900};
+  text-decoration: none;
+`
+
 export const FeaturedProductImage = styled.div`
   img {
     width: 47vw;

diff --git a/src/components/product_page/product-page.js b/src/components/product_page/product-page.js
@@ -11,6 +11,7 @@ import {
   ProductsHeading,
   FeaturedCTA,
   ProductCTA,
+  ProductCard,
 } from "./product-page-styles"
 
 export default function ProductSection({ data }) {
@@ -46,7 +47,7 @@ export default function ProductSection({ data }) {
           {data.products.map(product => {
             return (
               product.product.document.data.product_type === "Homeowner" && (
-                <div>
+                <ProductCard href={`/${product.product.document.uid}`}>
                   <ProductImage>
                     <img
                       src={
@@ -67,7 +68,7 @@ export default function ProductSection({ data }) {
                       {product.button_text}
                     </a>
                   </ProductCTA>
-                </div>
+                </ProductCard>
               )
             )
           })}
@@ -81,7 +82,7 @@ export default function ProductSection({ data }) {
           {data.products.map(product => {
             return (
               product.product.document.data.product_type === "Commercial" && (
-                <div>
+                <ProductCard href={`/${product.product.document.uid}`}>
                   <ProductImage>
                     <img
                       src={
@@ -103,7 +104,7 @@ export default function ProductSection({ data }) {
                       {product.button_text}
                     </a>
                   </ProductCTA>
-                </div>
+                </ProductCard>
               )
             )
           })}