Coding: Develop a timeline for programs page (#73)

package.json

@@ -1,12 +1,15 @@
 {
-  "homepage": "./",
+  "homepage": "http://iamkryptonite.github.io/anitab-org.github.io",
   "name": "anitab-org.github.io",
   "version": "0.1.2",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^4.2.2",
+    "@babel/plugin-transform-react-jsx": "^7.10.4",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "dayjs": "^1.9.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-native-reflect": "^0.1.6",

src/Components/Content/index.js

@@ -3,6 +3,7 @@ import { View, Text, Image } from 'react-native';
 import Projects from './../Projects';
 import Home from './../Home';
 import AboutUs from './../AboutUs';
+import Programs from './../Programs';
 import Contribute from '../Contribute';
 import OurEvents from './../OurEvents';
 
@@ -13,6 +14,9 @@ function Content({ selected, titles }) {
     return <AboutUs />;
   } else if (selected === 3) {
     return <Projects />;
+  }
+  if (selected === 2) {
+    return <Programs />;
   } else if(selected === 4) {
     return <OurEvents />; 
   }

src/Components/Programs/Timeline.js

@@ -0,0 +1,116 @@
+import React, {useEffect,useRef} from 'react';
+import dayjs from 'dayjs';
+import {StyleSheet,Text,View,TouchableWithoutFeedback,ScrollView} from 'react-native';
+import {Event,Line,Date,Marker,Fade,Stroke,ArrowNavigation,ArrowText,ScrollContainer,Container,Months} from './styles';
+import {ArrowLeftOutlined ,ArrowRightOutlined} from '@ant-design/icons'
+import {getEvents,getMonths} from '../../content/programs_events'
+//--------------------------------------------------------------------------------------------
+const events  = getEvents();
+const months = getMonths();
+const styles=StyleSheet.create({
+    scroller:{
+        width:'70%',
+        position:'absolute',
+        right:0,
+    }
+})
+function Timeline() {
+    var p = dayjs().date(); //current date
+    var curr_month = dayjs().month(); //current month
+    const scrollRef = useRef();
+    //scrolls the timeline to the current date and month
+    useEffect(() => {
+        scrollRef.current.scrollTo({x:p+=700});
+    })
+    //onclick scrolls the timeline to the left
+    const scrollLeft=()=>{
+        scrollRef.current.scrollTo({x:p-=35});
+        if(p<0)
+        p=0;
+    }
+    //onclick scrolls the timeline to the right
+    const scrollRight=()=>{
+        scrollRef.current.scrollTo({x:p+=35});
+    }
+  return (
+      <>
+            <ArrowNavigation>
+                <View style={{flexDirection:'row'}}>
+                    <TouchableWithoutFeedback onPress={scrollLeft}>
+                        <ArrowLeftOutlined style={{color:'#42aaf5'}}/>
+                    </TouchableWithoutFeedback>
+                    <ArrowText>PAST</ArrowText>
+                </View>
+                <View style={{flexDirection:'row'}}>
+                    <ArrowText>FUTURE</ArrowText>
+                    <TouchableWithoutFeedback onPress={scrollRight}>
+                        <ArrowRightOutlined style={{color:'#42aaf5'}}/>
+                    </TouchableWithoutFeedback>
+                </View>
+            </ArrowNavigation>
+            <ScrollContainer>
+                {
+                    events.map((item)=>(
+                        <View key={item.event}>
+                            <Event
+                                style={{
+                                        color:item.color,
+                                        borderColor:item.color,
+                                        flex:1,
+                                        left:item.date[0][1]*10,
+                                        borderRadius: 50,
+                                        zIndex:1,
+                                    }}
+                            >
+                                {item.event}
+                            </Event>
+                            <Stroke style={{width:(item.date[0][1]+5)*100}}></Stroke>
+                        </View>
+                    ))
+                }
+                <ScrollView
+                horizontal={true}
+                showsHorizontalScrollIndicator={false}
+                ref={scrollRef}
+                style={styles.scroller}
+                >
+                    <Container>
+                        {
+                            events.map((item)=>(
+                                <View style={{marginBottom:32,flexDirection:'column'}} key={item.event}>
+                                    <Line style={{left:(item.date[0][1]-1)*40, width:30*12*50, borderBottomColor:item.color}}></Line>
+                                    {
+                                        item.date.map((d)=>(
+                                            <Date
+                                                style={{
+                                                    left:(30*d[0]+d[1]-1)*40,
+                                                    backgroundColor:item.color,
+                                                    borderRadius: 50,
+                                                }}
+                                                key={30*d[0]+d[1]}>
+                                                {d[1]}
+                                            </Date>
+                                        ))
+                                    }
+                                    <Fade style={{left:(item.date[0][1]-1)*40,width:(p-item.date[0][1])*40+20}}></Fade>
+                                    <Marker style={{left:(p-1)*40+20,zIndex:-1}}></Marker>
+                                </View>
+                            ))
+                        }
+                        <View style={{left:(p-1)*40+25}}><Text>Today {dayjs().date()}th {months[curr_month][1]}</Text></View>
+                        <View style={{flexDirection:'row'}}>
+                            {
+                                months.map((m)=>(
+                                    <>
+                                        <Months style={{left:(m[0]*30)*40}}><Text>1st {m[1]}</Text></Months>
+                                    </>
+                                ))
+                            }
+                        </View>
+                    </Container>
+                </ScrollView>
+            </ScrollContainer>
+      </>
+  );
+}
+export default Timeline;

src/Components/Programs/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Timeline from './Timeline';
+function Programs() {
+  return (
+      <>
+            <Timeline></Timeline>
+      </>
+  );
+}
+export default Programs;

src/Components/Programs/styles.js

@@ -0,0 +1,73 @@
+import { View, Text } from 'react-native';
+import { styled } from 'react-native-reflect';
+export const Event = styled(Text,{
+    fontSize: 24,
+    borderWidth: 0.5,
+    paddingVertical:4,
+    paddingHorizontal: 8,
+    marginBottom: 4,
+    textAlign: 'center',
+    position:'relative',
+    backgroundColor:'#fff',
+    width:240
+});
+export const Line = styled(View,{
+    borderBottomWidth:10,
+    marginBottom:4,
+    position:'relative',
+    top: 16,
+    left: 20,
+});
+export const Date = styled(View,{
+    backgroundColor:'#ffdd30',
+    color:'#fff',
+    fontSize:20,
+    width:45,
+    height:45,
+    textAlign: 'center',
+    justifyContent:'center',
+    position:'absolute',
+});
+export const Marker = styled(View,{
+    backgroundColor:'#000',
+    borderRightWidth:2,
+    height: 60,
+    position:'absolute',
+    top: 24,
+});
+export const Fade = styled(View,{
+    backgroundColor:'#fff',
+    height:90,
+    position:'absolute',
+    opacity:0.6,
+})
+export const Stroke = styled(View,{
+    borderBottomColor:'#000',
+    borderBottomWidth:2,
+    top:-45,
+})
+export const ArrowNavigation = styled(View,{
+    flexDirection:'row',
+    marginTop:8,
+    marginBottom:8,
+    width: '80%',
+    justifyContent:'space-between'
+})
+export const ArrowText = styled(Text,{
+    fontSize:16,
+    marginLeft:8,
+    marginRight:8
+})
+export const ScrollContainer = styled(View,{
+    width:'80%',
+    flexWrap:'wrap',
+    flexDirection:'column',
+    marginBottom:64
+})
+export const Container = styled(View,{
+    width:80
+})
+export const Months = styled(View,{
+    marginBottom:16,
+    top:-35
+})

src/content/programs_events.js

@@ -0,0 +1,22 @@
+const events=[
+    {
+        event:"GSoC'20",
+        date:[[0,1],[0,7],[0,8],[0,12],[0,18],[0,20],[0,26],[0,31],[1,10],[1,20]],
+        color:'#ffdd30'
+    },
+    {
+        event:"Rails Girls'20",
+        date:[[0,5],[0,7],[0,9],[0,22],[0,28],[0,31],[1,8],[1,10]],
+        color:'#039eff'
+    },
+]
+const months = [[0,"January"],[1,"February"],[2,"March"],[3,"April"],[4,"May"],[5,"June"],[6,"July"],[7,"August"],[8,"September"],[9,"October"],[10,"November"],[11,"December"]];
+
+export const getEvents = () => {
+    return events;
+  };
+export const getMonths = () => {
+    return months;
+  };
+
+