Feat: developed contribution section in project page

src/Components/Projects/Contribution/Box/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { StyleSheet, View} from 'react-native';
+
+
+const ContributionBox = ({ commitCount }) => {
+    var hue = 0;
+    if(commitCount < 2) {
+        hue = .4;
+    } else if (commitCount >=2 && commitCount < 4) {
+        hue = .6;
+    } else if (commitCount >=4 && commitCount < 8 ) {
+        hue = .7;
+    } else if (commitCount >=8 && commitCount < 12) {
+        hue = .9;
+    } else {
+        hue = 1;
+    }
+
+    var colorCode = 'rgba(0, 113, 188,' + hue + ')';
+    return (
+        <View style={[style.box, {backgroundColor: colorCode}]}/>
+    );
+};
+
+const style = StyleSheet.create({
+    box: {
+        width: 20,
+        height: 20,
+        margin: 2.5, 
+    }
+});
+
+export default ContributionBox;

src/Components/Projects/Contribution/ContributionRow.js

@@ -0,0 +1,78 @@
+import React ,{useState} from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import ContributionBox from './Box';
+
+function ContributionRow ({...props}) {
+     let [data ,setData] = useState(null);
+    React.useEffect( () => {
+        const endpoint = props.detail.link;
+        const headers = {
+            "Authorization" : process.env.ACCESS_TOKEN
+        }
+        fetch(endpoint, {
+            "method" :"GET",
+            "headers" : headers
+        })
+        .then((resp) => resp.json())
+        .then((obj) => {
+            setData( obj) ;
+        });
+    }, [])
+        let Contributionrow = [];
+        const reponame = props.detail.name;
+        const take = () =>{
+            Contributionrow.push(<Text key={0} style={styles.desc}>{reponame}</Text>);
+            let week = 0;
+            let days =0;
+            while (true) {
+                for (let i=6;i>=0;i--)
+                {
+                    Contributionrow.push( 
+                        <ContributionBox key={days+1} commitCount={data[51-week].days[i]} />
+                        );
+                    days++;
+                    if(days>=30)break;
+                }
+                week++;
+                if(days>=30)break; 
+            }
+            return null;
+        }
+
+        return (
+
+            <View>
+                {data === null ?
+                    <Text style={styles.desc}>loading...</Text>
+                :    
+                <View style={{
+                    flexDirection: 'row',
+                    flexWrap: 'wrap',
+                }}
+                >
+                    {take()}
+                    {Contributionrow}
+                </View>
+                }
+            </View>      
+
+        );
+    //}
+};
+
+const styles = StyleSheet.create({
+    desc: {
+        color: '#0071BC',
+        fontSize: 16,
+        fontWeight: '400',
+        width: 190,
+        margin:4,
+    },
+    box: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        marginTop: 8,
+    }
+})
+
+export default ContributionRow;

src/Components/Projects/Contribution/index.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { View, StyleSheet, Text, ScrollView } from 'react-native';
+import SectionHeader from './../../SectionHeader';
+import ContributionRow from './ContributionRow';
+import ContributionBox from './Box';
+import { getrepoData } from './../../../content/projects_content';
+
+
+function Contribution ()  {
+    const repoData = getrepoData();
+        return (
+            <View >
+                <SectionHeader title={'Last 30 Days Contribution'} />
+                <ScrollView horizontal={true}>
+                <View style={{margin: 32}}>
+                    {repoData.data.map((repo,index) => (
+                        <ContributionRow detail={repo} key={index} />
+                        ))
+                    }
+                <View style={styles.description}>
+                   <Text style={styles.text}>Less</Text> 
+                   <ContributionBox commitCount={1} />
+                   <ContributionBox commitCount={3} />
+                   <ContributionBox commitCount={6} />
+                   <ContributionBox commitCount={10} />
+                   <ContributionBox commitCount={13} />
+                   <Text style={styles.text}>More</Text>
+                </View>
+                </View>
+                </ScrollView>
+            </View>
+        );
+
+}
+
+const styles = StyleSheet.create({
+    description: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignSelf: 'flex-end',
+
+    },
+    text: {
+        color: '#0071BC',
+        fontSize: 12,
+        fontWeight: '400',
+        padding: 4,
+    },
+});
+
+export default Contribution;

src/Components/Projects/ProjectCard/ProjectCardBadge/index.js

@@ -21,8 +21,8 @@ const styles = StyleSheet.create({
     marginTop: 8,
   },
   image: {
-    width: 24,
-    height: 24,
+    width: 32,
+    height: 32,
   },
   title: {
     color: '#103B81',

src/Components/Projects/index.js

@@ -5,6 +5,9 @@ import { View } from 'react-native';
 import ImageTextSection from './../ImageTextSection';
 import { getProjects } from './../../content/projects_content';
 import ProjectCard from './ProjectCard';
+import Calender from './Contribution';
+
+
 
 function Projects(props) {
   const projects = getProjects();
@@ -45,6 +48,7 @@ function Projects(props) {
       {/* 
       <SectionHeader title="Partners" />
       <Sponsors /> */}
+     <Calender/>
     </View>
   );
 }

src/content/projects_content.js

@@ -346,6 +346,39 @@ const projects = {
   ],
 };
 
+const repoData = {
+  data: [
+    {
+        name :   'Anitab-org.github.io',
+        link :  'https://api.github.com/repos/anitab-org/anitab-org.github.io/stats/commit_activity',
+    },
+    {
+        name :   'Mentorship-backend',
+        link :  'https://api.github.com/repos/anitab-org/mentorship-backend/stats/commit_activity',
+    },
+    {
+        name :   'Mentorship-android',
+        link :  'https://api.github.com/repos/anitab-org/mentorship-android/stats/commit_activity',
+    },
+    {
+        name :   'Mentorship-ios',
+        link :  'https://api.github.com/repos/anitab-org/mentorship-ios/stats/commit_activity',
+    },
+    {
+        name :   'Portal',
+        link :  'https://api.github.com/repos/anitab-org/portal/stats/commit_activity',
+    },
+    {
+        name :   'Vms',
+        link :  'https://api.github.com/repos/anitab-org/vms/stats/commit_activity',
+    }
+  ]
+};
+
+export const getrepoData = () => {
+  return repoData;
+}
+
 export const getProjects = () => {
   return projects;
 };