fix: Fix the query that retrieves team data

.docz/app/db.json

@@ -608,6 +608,17 @@
         }
       ]
     },
+    {
+      "key": "src/components/Team/team.jsx",
+      "value": [
+        {
+          "description": "",
+          "displayName": "Team",
+          "methods": [],
+          "actualName": "Team"
+        }
+      ]
+    },
     {
       "key": "src/components/About Card/index.jsx",
       "value": [

gatsby-config.js

@@ -15,6 +15,13 @@ module.exports = {
       },
     },
     `gatsby-transformer-sharp`,
+    `gatsby-transformer-yaml`,
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: `${__dirname}/src/data`,
+      },
+    },
     `gatsby-plugin-sharp`,
     {
       resolve: `gatsby-plugin-manifest`,

package.json

@@ -16,6 +16,7 @@
     "gatsby-source-filesystem": "^2.10.0",
     "gatsby-theme-docz": "^2.3.1",
     "gatsby-transformer-sharp": "^2.11.0",
+    "gatsby-transformer-yaml": "^2.11.0",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",

src/components/About Card/index.jsx

@@ -10,7 +10,7 @@ const AboutCards = ({ teamMember }) => {
         fixed={teamMember.image.childImageSharp.fixed}
         className={styles.image}
       />
-      <h3 className={styles["card-title"]}>{teamMember.name}</h3>
+      <h3 className={styles.cardTitle}>{teamMember.name}</h3>
       <p className={styles["card-subtitle"]}>{teamMember.role}</p>
     </div>
   )

src/components/About Card/styles.module.css

@@ -1,20 +1,22 @@
 .card {
-  min-height: 500px;
+  min-height: 270px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   background-color: #1729318f;
-  border-radius: 10px;
-  padding: 20px;
+  border-radius: 16px;
+  padding: 40px 20px;
   filter: drop-shadow(2px, 4px 12px rgba(0, 0, 0, 0.15));
 }
 
 .image {
+  /* max-width: 100px; */
   border-radius: 50%;
 }
 
-.card-title {
+.cardTitle {
+  margin-top: 15px;
   font-size: 24px;
   font-weight: 600;
 }

src/components/Team/styles.module.css

@@ -1,6 +1,6 @@
 .cardsHolder {
-  margin-top: 20px;
+  margin-top: 60px;
   display: grid;
   gap: 16px;
-  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }

src/components/Team/team.jsx

@@ -9,12 +9,14 @@ const Team = () => {
     query {
       allTeamYaml {
         edges {
-          name
-          role
-          image {
-            childImageSharp {
-              fixed(width: 100) {
-                ...GatsbyImageSharpFixed_tracedSVG
+          node {
+            name
+            role
+            image {
+              childImageSharp {
+                fixed(width: 175) {
+                  ...GatsbyImageSharpFixed_tracedSVG
+                }
               }
             }
           }
@@ -32,11 +34,8 @@ const Team = () => {
       {edges.map((teamMember, key) => {
         return <AboutCards key={key} teamMember={teamMember.node} />
       })}
-      {/* <AboutCards
-          imageSrc={image}
-          name="Anisio Mandlate"
-          role="Software developer"
-        /> */}
     </div>
   )
 }
+
+export default Team

src/pages/about-us.js

@@ -1,11 +1,10 @@
 import React from "react"
-// import { Link } from "gatsby"
 
 import styles from "../styles/about-us.module.css"
 import Layout from "../components/Layout"
 import SEO from "../components/SEO/seo"
 import image from "../images/payments-logo.png"
-import AboutCards from "../components/About Card"
+import Team from "../components/Team/team"
 
 const AboutUs = () => (
   <Layout>
@@ -30,33 +29,7 @@ const AboutUs = () => (
 
     <section className={styles.team}>
       <h1>The Team</h1>
-      {/* <div className={styles.cardsHolder}>
-        <AboutCards
-          imageSrc={image}
-          name="Anisio Mandlate"
-          role="Software developer"
-        />
-        <AboutCards
-          imageSrc={image}
-          name="Anisio Mandlate"
-          role="Software developer"
-        />
-        <AboutCards
-          imageSrc={image}
-          name="Anisio Mandlate"
-          role="Software developer"
-        />
-        <AboutCards
-          imageSrc={image}
-          name="Anisio Mandlate"
-          role="Software developer"
-        />
-        <AboutCards
-          imageSrc={image}
-          name="Anisio Mandlate"
-          role="Software developer"
-        />
-      </div> */}
+      <Team />
     </section>
   </Layout>
 )

src/styles/about-us.module.css

@@ -23,10 +23,3 @@
 .team h1 {
   text-align: center;
 }
-
-/* .cardsHolder {
-  margin-top: 20px;
-  display: grid;
-  gap: 16px;
-  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-} */