Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, {Component} from 'react';
- import { Text, ScrollView, View, Platform } from 'react-native';
- import { Button } from 'react-native-elements';
- import { styles, colors, fonts } from '../resources/css/styles';
- export default class WeeklyPersonalLog extends Component{
- render(){
- if (Platform.OS === 'ios'){
- return(
- <View style={styles.weeklyLogContainer}>
- <View style={styles.actionBtnCnt}>
- <Button buttonStyle={styles.tabBtnToggle} fontFamily={fonts.$Montserrat} color={colors.$Dark_Text} title='Day' />
- <Button buttonStyle={[styles.tabBtnToggle,styles.tabBtnToggleActive]} fontFamily={fonts.$Montserrat} color={colors.$Dark_Text} title='Week' />
- </View>
- <View style={styles.datepickerCnt}>
- <Button buttonStyle={styles.datepickerBtn} large={true} fontSize={50} color={colors.$Pink} fontFamily={fonts.$Icon} title='2' onPress={() => alert('Back')} />
- <Text style={styles.datepickerDate}>28 NOV - 04 DEC</Text>
- <Button buttonStyle={styles.datepickerBtn} large={true} fontSize={50} color={colors.$Pink} fontFamily={fonts.$Icon} title='3' onPress={() => alert('Forward')} />
- </View>
- <View style={styles.actionBtnCnt}>
- <Button buttonStyle={styles.actionBtnRound} fontFamily={fonts.$Icon} color={colors.$White} fontSize={32} large={true} title='5' />
- <Button buttonStyle={styles.actionBtnRound} fontFamily={fonts.$Icon} color={colors.$White} fontSize={32} large={true} title='7' />
- <Button buttonStyle={styles.actionBtnRound} fontFamily={fonts.$Icon} color={colors.$White} fontSize={32} large={true} title='8' />
- </View>
- <View style={styles.totalHoursCnt}>
- <Text style={styles.totalHoursTitle}>Total hours</Text>
- <Text style={styles.totalHoursCount}>60
- <Text style={styles.totalHoursCountDesc}>HRS
- <Text style={styles.totalHoursCount}>10
- <Text style={styles.totalHoursCountDesc}>MINS</Text>
- </Text>
- </Text>
- </Text>
- </View>
- <View style={styles.weeklyLogStatsCnt}>
- <View style={styles.weeklyLogStatsItem}>
- <Text style={styles.weeklyLogStatsItemTitle}>Total overtime</Text>
- <Text style={styles.weeklyLogStatsItemCount}>12
- <Text style={styles.weeklyLogStatsItemCountDesc}> HRS </Text>
- </Text>
- </View>
- <View style={styles.weeklyLogStatsItem}>
- <Text style={styles.weeklyLogStatsItemTitle}>Anti-social</Text>
- <Text style={styles.weeklyLogStatsItemCount}>30%</Text>
- </View>
- </View>
- <View style={styles.weeklyLogStatsCnt}>
- <View style={styles.weeklyLogStatsItem}>
- <Text style={styles.weeklyLogStatsItemTitle}>Average hrs per day</Text>
- <Text style={styles.weeklyLogStatsItemCount}>10
- <Text style={styles.weeklyLogStatsItemCountDesc}>HRS
- <Text style={styles.weeklyLogStatsItemCount}> 30
- <Text style={styles.weeklyLogStatsItemCountDesc}>MINS</Text>
- </Text>
- </Text>
- </Text>
- </View>
- <View style={styles.weeklyLogStatsItem}>
- <Text style={styles.weeklyLogStatsItemTitle}>Current weekly average</Text>
- <Text style={styles.weeklyLogStatsItemCount}>48
- <Text style={styles.weeklyLogStatsItemCountDesc}>HRS</Text>
- </Text>
- </View>
- </View>
- </View>
- );
- } else if (Platform.OS === 'android'){
- return(
- <ScrollView style={styles.weeklyLogContainer}>
- <View style={styles.actionBtnCnt}>
- <Button buttonStyle={styles.tabBtnToggle} fontFamily={fonts.$Montserrat} color={colors.$Dark_Text} title='Day' />
- <Button buttonStyle={[styles.tabBtnToggle,styles.tabBtnToggleActive]} fontFamily={fonts.$Montserrat} color={colors.$Dark_Text} title='Week' />
- </View>
- <View style={styles.datepickerCnt}>
- <Button buttonStyle={styles.datepickerBtn} large={true} fontSize={50} color={colors.$Pink} fontFamily={fonts.$Icon} title='2' onPress={() => alert('Back')} />
- <Text style={styles.datepickerDate}>28 NOV - 04 DEC</Text>
- <Button buttonStyle={styles.datepickerBtn} large={true} fontSize={50} color={colors.$Pink} fontFamily={fonts.$Icon} title='3' onPress={() => alert('Forward')} />
- </View>
- <View style={styles.actionBtnCnt}>
- <Button buttonStyle={styles.actionBtnRound} fontFamily={fonts.$Icon} color={colors.$White} fontSize={32} large={true} title='5' />
- <Button buttonStyle={styles.actionBtnRound} fontFamily={fonts.$Icon} color={colors.$White} fontSize={32} large={true} title='7' />
- <Button buttonStyle={styles.actionBtnRound} fontFamily={fonts.$Icon} color={colors.$White} fontSize={32} large={true} title='8' />
- </View>
- <View style={styles.totalHoursCnt}>
- <Text style={styles.totalHoursTitle}>Total hours</Text>
- <Text style={styles.totalHoursCount}>60
- <Text style={styles.totalHoursCountDesc}>HRS
- <Text style={styles.totalHoursCount}>10
- <Text style={styles.totalHoursCountDesc}>MINS</Text>
- </Text>
- </Text>
- </Text>
- </View>
- <View style={styles.weeklyLogStatsCnt}>
- <View style={styles.weeklyLogStatsItem}>
- <Text style={styles.weeklyLogStatsItemTitle}>Total overtime</Text>
- <Text style={styles.weeklyLogStatsItemCount}>12
- <Text style={styles.weeklyLogStatsItemCountDesc}> HRS </Text>
- </Text>
- </View>
- <View style={styles.weeklyLogStatsItem}>
- <Text style={styles.weeklyLogStatsItemTitle}>Anti-social</Text>
- <Text style={styles.weeklyLogStatsItemCount}>30%</Text>
- </View>
- </View>
- <View style={styles.weeklyLogStatsCnt}>
- <View style={styles.weeklyLogStatsItem}>
- <Text style={styles.weeklyLogStatsItemTitle}>Average hrs per day</Text>
- <Text style={styles.weeklyLogStatsItemCount}>10
- <Text style={styles.weeklyLogStatsItemCountDesc}>HRS
- <Text style={styles.weeklyLogStatsItemCount}> 30
- <Text style={styles.weeklyLogStatsItemCountDesc}>MINS</Text>
- </Text>
- </Text>
- </Text>
- </View>
- <View style={styles.weeklyLogStatsItem}>
- <Text style={styles.weeklyLogStatsItemTitle}>Current weekly average</Text>
- <Text style={styles.weeklyLogStatsItemCount}>48
- <Text style={styles.weeklyLogStatsItemCountDesc}>HRS</Text>
- </Text>
- </View>
- </View>
- </ScrollView>
- );
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement