Feat: developed contribution section in project page

src/Components/Content/index.js

@@ -4,6 +4,7 @@ import Projects from './../Projects';
 import Home from './../Home';
 import AboutUs from './../AboutUs';
 import Contribute from '../Contribute';
+import Events from '../Events';
 
 function Content({ selected, titles }) {
   if (selected === 0) {
@@ -12,6 +13,8 @@ function Content({ selected, titles }) {
     return <AboutUs />;
   } else if (selected === 3) {
     return <Projects />;
+  } else if(selected ===  4) {
+    return <Events />
   }
   if (selected === 5) {
     return <Contribute />;

src/Components/Events/Cards/CardBadge/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import {Text, Image, StyleSheet, View} from 'react-native';
+
+const  Badge = (props) => {
+    return (
+        <View style={styles.container}>
+            <Image style={styles.image} source={props.link} />
+            <Text style={styles.description}>{props.text}</Text>
+        </View>
+    );
+};
+
+const styles =  StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        marginTop: 16,
+    },
+    image: {
+        width: 32,
+        height: 32,
+    },
+    description: {
+        fontSize: 16,
+        color: '#103B81',
+        fontWeight: 200,
+        marginLeft: 16,
+        marginTop:8,
+    }
+});
+
+export default Badge;

src/Components/Events/Cards/index.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import {Text, StyleSheet, View, Linking} from 'react-native';
+import ScaledImage from '../../ScaledImage';
+import { withCard } from './../../../Decorators/Card';
+import Badge from './CardBadge';
+
+const EventCard = ({ props, isOver }) => {
+    return (
+     <View style={styles.card} >
+        <ScaledImage width={286}   source={props.highlights.source} />
+        <Text style={styles.title}>{props.title}</Text>
+        <Badge text={props.date} link={require('./../../../assets/events_and_highlights/calendar.png')}  />
+        <Badge text={props.location} link={require('./../../../assets/events_and_highlights/location.png')} />
+        <Badge text={props.timings} link={require('./../../../assets/events_and_highlights/time.png')} />
+        <View style={{marginTop: 32}}>
+            {props.description.map((detail,index) => (
+                <Text
+                    style={{
+                        color: '#103B81',
+                        fontSize: 16,
+                        fontWeight: '200'
+                    }}
+                    >
+                    {detail.par}
+                </Text>
+            ))}
+        </View>
+        <Text style={{
+            color: '#103B81',
+            fontSize: 16,
+            fontWeight: '400', 
+            marginTop: 32,
+        }}
+        onPress={() => {Linking.openURL(props.know_more.link)}}
+        >
+        {props.know_more.par}
+        </Text>
+     </View>   
+    );
+};
+
+const styles = StyleSheet.create({
+    card: {
+        flex: 1,
+        width: 286,
+        borderRadius: 4,
+        overflow: 'hidden', 
+    },
+    cardContent: {
+        marginHorizontal: 18,
+        maeginVertical: 10
+    },
+    title: {
+        color: '#103B81',
+        fontWeight: '400',
+        fontSize: 16,
+        marginTop: 12,
+    },
+    desc: {
+        fontSize: 16,
+        color: '#103B81',
+        fontWeight: '200',
+        marginTop: 16,
+    },
+})
+
+export default withCard(EventCard);
+

src/Components/Events/index.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import {View , StyleSheet, Text} from 'react-native';
+import EventCard from './Cards';
+import {getevents_highlights} from './../../content/events_and_highlights';
+import SectionSubheader from './../SectionSubheader';
+
+const events_highlight = getevents_highlights();
+
+class Events extends React.Component {
+    render() {
+        return (
+         <View style={styles.container} >
+            <SectionSubheader
+                title={events_highlight.sections[0].title}
+            />
+            {events_highlight.sections[0].content.map((detail,index) => {   
+                return <Text style={styles.description} key={index}>{detail.par}</Text>;
+            })}
+            <View
+              style={{
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                marginTop: 30,
+              }}
+            >
+                {events_highlight.sections[1].events.map((event_detail,index) => (
+                    <EventCard
+                        key={event_detail.title}
+                        props={event_detail}
+                        backgroundColor="#e7edfd"
+                        padding={12}
+                    />
+                ))}
+            </View>
+         </View>   
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        width: '80%',
+        alignItems: 'left',
+        paddingLeft: 16,
+        paddingRight: 16,
+        marginTop: 30,
+    },
+    description: {
+        flex: 1,
+        marginTop: 20,
+        paddingLeft: 16,
+        fontSize: 18,
+        flexGrow: 1,
+        fontWeight: 150,
+        color: '#103B81',
+        textAlign: 'left',
+    }
+});
+export default Events;

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

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

src/Components/Projects/Contribution/ContributionRow.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import ContributionBox from './Box';
+
+class ContributionRow extends React.Component {
+
+    constructor(props){
+        super(props);
+        this.state = {data: null}       
+    }
+
+    componentDidMount(){     
+        const endpoint = this.props.po.link;
+        const headers = {
+            "Authorization" : process.env.ACCESS_TOKEN
+        }
+        fetch(endpoint, {
+            "method" :"GET",
+            "headers" : headers
+        })
+        .then((resp) => resp.json())
+        .then((js) => this.setState({data: js}));
+    }
+
+    render() {
+        var Contributionrow = [];
+
+        const take = () =>{
+            Contributionrow.push(<Text style={styles.desc}>{this.props.po.name}</Text>);
+            var week = 0;
+            var days =0;
+            while (true) {
+                for (var i=6;i>=0;i--)
+                {
+                    Contributionrow.push( 
+                        <ContributionBox props={this.state.data[51-week].days[i]} />
+                        );
+                    days++;
+                    if(days>=30)break;
+                }
+                week++;
+                if(days>=30)break; 
+            }
+            return null;
+        }
+
+        return (
+
+            <View>
+                {this.state.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:5,
+    },
+    box: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        marginTop: 10,
+    }
+})
+
+export default ContributionRow;

src/Components/Projects/Contribution/index.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import SectionHeader from './../../SectionHeader';
+import ContributionRow from './ContributionRow';
+import ContributionBox from './Box';
+
+const 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',
+    }
+];
+
+class Contribution extends React.Component {
+    render() {
+        return (
+            <View >
+                <SectionHeader title={'Last 30 Days Contribution'} />
+                <View style={{margin: 32}}>
+                    {data.map((repo) => (
+                    <ContributionRow po={repo}  />
+                    ))
+                    }
+                <View style={styles.description}>
+                   <Text style={styles.text}>Less</Text> 
+                   <ContributionBox props={1} />
+                   <ContributionBox props={3} />
+                   <ContributionBox props={6} />
+                   <ContributionBox props={10} />
+                   <ContributionBox props={13} />
+                   <Text style={styles.text}>More</Text>
+                </View>
+                </View>
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    description: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignSelf: 'flex-end',
+        paddingRight: 480,
+    },
+    text: {
+        color: '#0071BC',
+        fontSize: 12,
+        fontWeight: '400',
+        padding: 5
+    },
+});
+
+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',