From 2c8aa9671f2b9ec7f326ad728d407d17ccc83fb5 Mon Sep 17 00:00:00 2001 From: Viviana Date: Fri, 2 Apr 2021 13:03:35 -0400 Subject: [PATCH] #31 Extracted styling componenets into components folderr and removed unnecessary code in pages folder for the Product page --- src/components/products/products-styles.js | 119 ++++++++++++++++ src/components/products/products.js | 54 ++++++++ src/pages/products.js | 151 +-------------------- 3 files changed, 175 insertions(+), 149 deletions(-) create mode 100644 src/components/products/products-styles.js create mode 100644 src/components/products/products.js diff --git a/src/components/products/products-styles.js b/src/components/products/products-styles.js new file mode 100644 index 0000000..ed0be1b --- /dev/null +++ b/src/components/products/products-styles.js @@ -0,0 +1,119 @@ +import styled from "styled-components" +import dimensions from "../../style/dimensions" + +export const ProductPageHeading = styled.div` + font-size: calc(90px + (90 - 32) * ((100vw - 300px) / (1440 - 300))); + font-weight: bold; +` + +export const FeaturedProductSection = styled.div` + width: 100%; + padding-top: 40px; + + @media (min-width: ${dimensions.maxwidthTablet}px) { + width: 86vw; + display: flex; + } +` + +export const FeaturedProductImage = styled.div` + width: 47vw; + height: 432px; + background-color: #C4C4C4; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + width: 100%; + height: 225px; + } +` + +export const FeaturedProductText = styled.div` + padding-left: 5vw; + padding-top: 52px; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + padding-left: 0vw; + padding-top: 26px; + } +` + +export const FeaturedProductHeading = styled.div` + font-size: calc(20px + (20 - 16) * ((100vw - 300px) / (1440 - 300))); + text-transform: uppercase; +` + +export const FeaturedProductName = styled.div` + font-size: calc(40px + (40 - 24) * ((100vw - 300px) / (1440 - 300))); + font-weight: bold; + padding-top: 17px; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + padding-top: 8px; + } +` + +export const FeaturedProductDescription = styled.div` + font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1440 - 300))); + padding-top: 32px; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + padding-top: 15px; + } +` + +export const ModelScope = styled.div` + margin-top: 200px; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + margin-top: 105px; + } +` + +export const ModelScopeHeading = styled.div` + font-size: calc(20px + (20 - 16) * ((100vw - 300px) / (1440 - 300))); + text-transform: uppercase; +` + +export const ProductsGroup = styled.div` + @media (min-width: ${dimensions.maxwidthTablet}px) { + display: flex; + justify-content: space-between; + } +` + +export const Product = styled.div` + padding-top: 33px; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + padding-top: 35px; + } +` + +export const ProductImage = styled.div` + background-color: #C4C4C4; + width: 21vw; + height: 245px; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + width: 100%; + } +` + +export const ProductName = styled.div` + font-size: calc(30px + (30 - 24) * ((100vw - 300px) / (1440 - 300))); + font-weight: bold; + padding-top: 49px; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + padding-top: 24px; + } +` + +export const ProductDescription = styled.div` + font-size: 15px; + padding-top: 15px; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + visibility: hidden; + } +` \ No newline at end of file diff --git a/src/components/products/products.js b/src/components/products/products.js new file mode 100644 index 0000000..71ef81a --- /dev/null +++ b/src/components/products/products.js @@ -0,0 +1,54 @@ +import React from "react" +import { + ProductPageHeading, + FeaturedProductSection, + FeaturedProductImage, + FeaturedProductText, + FeaturedProductHeading, + FeaturedProductName, + FeaturedProductDescription, + ModelScope, + ModelScopeHeading, + ProductsGroup, + Product, + ProductImage, + ProductName, + ProductDescription, +} from "./products-styles" + +export default function ProductSection({ data }) { + return ( +
+ {data.product_page_main_heading} + + + + {data.featured_product_heading} + {data.featured_product_name} + {data.featured_product_description} + + + +
+ {data.model_scope.map(scope => { + return ( + + {scope.model_scope_heading} + + {data.products.map(product => { + return ( + + + {product.product_title} + {product.product_description} + + ) + })} + + + ) + })} +
+
+ ) +} \ No newline at end of file diff --git a/src/pages/products.js b/src/pages/products.js index 05bf5a4..2cb05de 100644 --- a/src/pages/products.js +++ b/src/pages/products.js @@ -1,161 +1,14 @@ import React from "react" import { graphql } from "gatsby" import Layout from "../components/layout" -import styled from "styled-components" -import dimensions from "../style/dimensions" - -const ProductPageHeading = styled.div` - font-size: calc(90px + (90 - 32) * ((100vw - 300px) / (1440 - 300))); - font-weight: bold; -` - -const FeaturedProductSection = styled.div` - width: 100%; - padding-top: 40px; - - @media (min-width: ${dimensions.maxwidthTablet}px) { - width: 86vw; - display: flex; - } -` - -const FeaturedProductImage = styled.div` - width: 47vw; - height: 432px; - background-color: #C4C4C4; - - @media (max-width: ${dimensions.maxwidthTablet}px) { - width: 100%; - height: 225px; - } -` - -const FeaturedProductText = styled.div` - padding-left: 5vw; - padding-top: 52px; - - @media (max-width: ${dimensions.maxwidthTablet}px) { - padding-left: 0vw; - padding-top: 26px; - } -` - -const FeaturedProductHeading = styled.div` - font-size: calc(20px + (20 - 16) * ((100vw - 300px) / (1440 - 300))); - text-transform: uppercase; -` - -const FeaturedProductName = styled.div` - font-size: calc(40px + (40 - 24) * ((100vw - 300px) / (1440 - 300))); - font-weight: bold; - padding-top: 17px; - - @media (max-width: ${dimensions.maxwidthTablet}px) { - padding-top: 8px; - } -` - -const FeaturedProductDescription = styled.div` - font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1440 - 300))); - padding-top: 32px; - - @media (max-width: ${dimensions.maxwidthTablet}px) { - padding-top: 15px; - } -` - -const ModelScope = styled.div` - margin-top: 200px; - - @media (max-width: ${dimensions.maxwidthTablet}px) { - margin-top: 105px; - } -` - -const ModelScopeHeading = styled.div` - font-size: calc(20px + (20 - 16) * ((100vw - 300px) / (1440 - 300))); - text-transform: uppercase; -` - -const ProductsGroup = styled.div` - @media (min-width: ${dimensions.maxwidthTablet}px) { - display: flex; - justify-content: space-between; - } -` - -const Product = styled.div` - padding-top: 33px; - - @media (max-width: ${dimensions.maxwidthTablet}px) { - padding-top: 35px; - } -` - -const ProductImage = styled.div` - background-color: #C4C4C4; - width: 21vw; - height: 245px; - - @media (max-width: ${dimensions.maxwidthTablet}px) { - width: 100%; - } -` - -const ProductName = styled.div` - font-size: calc(30px + (30 - 24) * ((100vw - 300px) / (1440 - 300))); - font-weight: bold; - padding-top: 49px; - - @media (max-width: ${dimensions.maxwidthTablet}px) { - padding-top: 24px; - } -` - -const ProductDescription = styled.div` - font-size: 15px; - padding-top: 15px; - - @media (max-width: ${dimensions.maxwidthTablet}px) { - visibility: hidden; - } -` +import ProductPage from "../components/products/products" export default function ProductSection({ data }) { const productSectionData = data.prismicProductPage.data return ( - {productSectionData.product_page_main_heading} - - - - {productSectionData.featured_product_heading} - {productSectionData.featured_product_name} - {productSectionData.featured_product_description} - - - -
- {productSectionData.model_scope.map(scope => { - return ( - - {scope.model_scope_heading} - - {productSectionData.products.map(product => { - return ( - - - {product.product_title} - {product.product_description} - - ) - })} - - - ) - })} -
+ ) }