Merge pull request #40 from benji011/add-programming-languages-graph-ql

Feature: Add programming languages to 'Projects'
smakosh · Oct 17, 2020 · f40c38d · f40c38d · vercel · Oct 17, 2020
2 parents a52b7e4 + 97097a8
commit f40c38d
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 12 deletions.
diff --git a/src/components/common/Card/index.js b/src/components/common/Card/index.js
@@ -5,3 +5,9 @@ export const Card = styled.div`
   background: ${({ theme }) => (theme === 'light' ? '#fff' : '#181717')};
   height: 100%;
 `;
+
+export const TitleWrap = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
diff --git a/src/components/landing/Projects/index.jsx b/src/components/landing/Projects/index.jsx
@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
 import { ThemeContext } from 'providers/ThemeProvider';
-import { Container, Card } from 'components/common';
+import { Container, Card, TitleWrap } from 'components/common';
 import Star from 'components/common/Icons/Star';
 import Fork from 'components/common/Icons/Fork';
-import { Wrapper, Grid, Item, Content, Stats } from './styles';
+import { Wrapper, Grid, Item, Content, Stats, Languages } from './styles';
 
 export const Projects = () => {
   const { theme } = useContext(ThemeContext);
@@ -30,6 +30,12 @@ export const Projects = () => {
                     totalCount
                   }
                   forkCount
+                  languages(first: 3) {
+                    nodes {
+                      id,
+                      name
+                    }
+                  }
                 }
               }
             }
@@ -49,16 +55,29 @@ export const Projects = () => {
                 <h4>{node.name}</h4>
                 <p>{node.description}</p>
               </Content>
-              <Stats theme={theme}>
-                <div>
-                  <Star color={theme === 'light' ? '#000' : '#fff'} />
-                  <span>{node.stargazers.totalCount}</span>
-                </div>
-                <div>
-                  <Fork color={theme === 'light' ? '#000' : '#fff'} />
-                  <span>{node.forkCount}</span>
-                </div>
-              </Stats>
+              <TitleWrap>
+                <Stats theme={theme}>
+                  <div>
+                    <Star color={theme === "light" ? "#000" : "#fff"} />
+                    <span>{node.stargazers.totalCount}</span>
+                  </div>
+                  <div>
+                    <Fork color={theme === "light" ? "#000" : "#fff"} />
+                    <span>{node.forkCount}</span>
+                  </div>
+                </Stats>
+                <Stats theme={theme}>
+                  <Languages>
+                    {
+                      node.languages.nodes.map(({ id, name }) => (
+                        <span key={id}>
+                          {name}
+                        </span>
+                      ))
+                    }
+                  </Languages>
+                </Stats>
+              </TitleWrap>
             </Card>
           </Item>
         ))}

diff --git a/src/components/landing/Projects/styles.js b/src/components/landing/Projects/styles.js
@@ -37,6 +37,7 @@ export const Item = styled.div`
 
 export const Content = styled.div`
   padding: 1rem 0;
+  min-height: 160px;
 `;
 
 export const Stats = styled.div`
@@ -63,3 +64,8 @@ export const Stats = styled.div`
     }
   }
 `;
+
+export const Languages = styled.div`
+  opacity: 0.5;
+  font-size: 14px;
+`;