implt: review slice

fperera123 · Dec 31, 2022 · 9f69167 · 9f69167
1 parent a883254
commit 9f69167
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 18 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -26,6 +26,9 @@ const strapiConfig = {
             unorderedList:{
               populate: '*',
             },
+            reviewOneItem: {
+              populate: '*',
+            },
           }
         },
       },

diff --git a/src/sections/slices/ContentWithImageAndList/ContentWithImageAndList.js b/src/sections/slices/ContentWithImageAndList/ContentWithImageAndList.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import { Col, Container, Row } from 'react-bootstrap'
 import { GatsbyImage as Img, getImage } from 'gatsby-plugin-image'
 import Content from "../contentStyles"
 

diff --git a/src/sections/slices/Reviews/Components/Card/index.js b/src/sections/slices/Reviews/Components/Card/index.js
@@ -1,17 +1,19 @@
 import React from 'react'
 import Card from './style'
-export default function TestimonialCard({ userName, userPosition, text, image, ...rest }) {
+import { GatsbyImage as Img, getImage } from 'gatsby-plugin-image'
+
+export default function TestimonialCard({ customerName, customerPosition, text, image, imageAlt, ...rest }) {
   return (
     <Card backgroundColor="#fff">
       <Card.Image>
-        <img src={image} alt="Testimonial" />
+        <Img image={getImage(image.localFile)} alt={imageAlt} layout="fullWidth" />
       </Card.Image>
       <Card.Body fontColor="#262729">
         <Card.Text>{text}</Card.Text>
         <Card.UserBlock>
           <Card.UserInfo mr="15px" mb="15px">
-            <Card.Title as="h3">{userName}</Card.Title>
-            <Card.UserPosition>{userPosition}</Card.UserPosition>
+            <Card.Title as="h3">{customerName}</Card.Title>
+            <Card.UserPosition>{customerPosition}</Card.UserPosition>
           </Card.UserInfo>
         </Card.UserBlock>
       </Card.Body>

diff --git a/src/sections/slices/Reviews/Reviews.js b/src/sections/slices/Reviews/Reviews.js
@@ -3,21 +3,18 @@ import TestimonialCard from './Components/Card'
 import { Images } from "~data"
 import Testimonial from './style'
 import { Col, Container, Row } from 'react-bootstrap'
-export default function TestimonialSection({ data }) {
-  const { userName, userPosition, text, image } = data;
+export default function TestimonialSection({ data: { reviewOneItem } }) {
   return (
     <Testimonial backgroundColor="#f3f4f6">
       <Container>
         <Row className="justify-content-center">
-          <Col className="col-xl-4 col-md-6">
-            <TestimonialCard image={image} text="@Fastland is great for creating landing pages within minutes! It actually takes less time." userName="Angela Park" userPosition="CEO at Orbital" />
-          </Col>
-          <Col className="col-xl-4 col-md-6">
-            <TestimonialCard image={Images.agency.testiMonialUserimg2} text="@Fastland is great for creating landing pages within minutes! It actually takes less time." userName="Angela Park" userPosition="CEO at Orbital" />
-          </Col>
-          <Col className="col-xl-4 col-md-6">
-            <TestimonialCard image={Images.agency.testiMonialUserimg3} text="@Fastland is great for creating landing pages within minutes! It actually takes less time." userName="Angela Park" userPosition="CEO at Orbital" />
-          </Col>
+          {
+            reviewOneItem.map((item, index) => {
+              return <Col key={index} className="col-xl-4 col-md-6">
+                <TestimonialCard image={item.image} imageAlt={item.imageAlt} text={item.text} customerName={item.customerName} customerPosition={item.customerPosition} />
+              </Col>
+            })
+          }
         </Row>
       </Container>
     </Testimonial>

diff --git a/src/templates/Universal.js b/src/templates/Universal.js
@@ -79,11 +79,19 @@ export const query = graphql`
           }
           ... on STRAPI__COMPONENT_SLICES_REVIEW_ONE {
             __typename
+           reviewOneItem{
             text
             customerName
             customerPosition
-            image
+            image {
+              localFile {
+                childImageSharp {
+                  gatsbyImageData
+                }
+              }
+            }
             imageAlt
+           }
           }
       }
     }
@@ -129,7 +137,7 @@ export default function Home({ data: { universal: { slices, slug } } }) {
           case "STRAPI__COMPONENT_SLICES_CONTENT_WITH_IMAGE_AND_LIST":
             return <ContentWithImageAndList key={slice.__typename} data={slice} />
 
-          case "STRAPI__COMPONENT_SLICES_CONTENT_WITH_IMAGE_AND_LIST":
+          case "STRAPI__COMPONENT_SLICES_REVIEW_ONE":
             return <Reviews key={slice.__typename} data={slice} />
 
           default: