#37 moving singular product page to template

Scout-NU · Apr 16, 2021 · 97872c6 · 97872c6
1 parent 165f947
commit 97872c6
Showing 1 changed file with 101 additions and 2 deletions.
diff --git a/src/templates/product.js b/src/templates/product.js
@@ -1,20 +1,119 @@
 import React from "react"
 import { graphql } from "gatsby"
+import {
+  SingularProductContainer,
+  HeroSection,
+  ImageContainer,
+  MainImage,
+  SmallImageContainer,
+  SmallImage,
+  TextContainer,
+  ProductType,
+  ProductName,
+  ProductDescription,
+  IconSection,
+  IconSectionHeading,
+  IconContainer,
+  Icon,
+  IconImage,
+  IconCaption,
+  FeatureSpecSection,
+  FeatureIcon,
+  FeatureSpecHeading,
+  FeatureSpecFeatures,
+  Feature,
+  FeatureName,
+  FeatureImage,
+  FeatureDescription,
+} from "../components/singular-product/singular-product-styles"
 
+import Layout from "../components/layout"
 export default function Product({ data }) {
   const products = data.allPrismicProduct.edges[0].node
 
-  return <h1>{products.data.product_title}</h1>
+  return (
+    <Layout>
+    <SingularProductContainer>
+      <HeroSection>
+        <ImageContainer>
+          <MainImage></MainImage>
+          <SmallImageContainer>
+            <SmallImage></SmallImage>
+            <SmallImage></SmallImage>
+            <SmallImage></SmallImage>
+            <SmallImage></SmallImage>
+            <SmallImage></SmallImage>
+          </SmallImageContainer>
+        </ImageContainer>
+        <TextContainer>
+          <ProductType>{products.data.product_type}</ProductType>
+          <ProductName>{products.data.product_title}</ProductName>
+          <ProductDescription>
+            {products.data.product_description.text}
+          </ProductDescription>
+        </TextContainer>
+      </HeroSection>
+      <IconSection>
+        <IconSectionHeading>{products.data.icon_section_title}</IconSectionHeading>
+        <IconContainer>
+          {products.data.icons.map(icon => {
+            return (
+              <Icon>
+                <IconImage></IconImage>
+                <IconCaption>{icon.icon_text}</IconCaption>
+              </Icon>
+            )
+          })}
+        </IconContainer>
+      </IconSection>
+
+      <FeatureSpecSection>
+        <FeatureIcon>
+          <img src={products.data.feature_icon.url} alt="Orange checklist icon" />
+        </FeatureIcon>
+        <FeatureSpecHeading>{products.data.feature_title}</FeatureSpecHeading>
+        <FeatureSpecFeatures>
+          {products.data.features.map((feature, id) => {
+            return (
+              <Feature>
+                <FeatureName>{feature.feature_name}</FeatureName>
+                <FeatureImage>
+                  <img
+                    key={id}
+                    className={id === 0 ? "first-image" : ""}
+                    className={id !== 0 ? "not-image" : ""}
+                    src={feature.feature_image.url}
+                    alt="Feature of a product"
+                  />
+                </FeatureImage>
+                <FeatureDescription>
+                  {feature.feature_description.text}
+                </FeatureDescription>
+              </Feature>
+            )
+          })}
+        </FeatureSpecFeatures>
+      </FeatureSpecSection>
+    </SingularProductContainer>
+    </Layout>
+  )
 }
 
 export const query = graphql`
   query($uid: String!) {
     allPrismicProduct(filter: { uid: { eq: $uid } }) {
-      edges { 
+      edges {
         node {
           id
           uid
           data {
+            feature_icon {
+            url
+            dimensions {
+              height
+              width
+            }
+          }
             product_title
             button_destination
             button_title