src/views/diary/components/DateCalendar.js
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {convertDate} from '../../../utils/FormatterUtils';
import {ColorPalette} from '../../../utils/ColorConstants';
import {globalStyles} from '../../../styles/styles';
/**
* Component that display the date with year, month, day and weekday like on
* single page single day calendars
* @param {Object} props - Properties
* @param {string} props.date - The date (YYY-MM-DD)
* @returns {Object} The date shown as on a single page single day calendar
*/
export default function DateCalendar(props) {
// Convert string to ISO date and convert to local date
const [weekDay, day, month, year] = convertDate(props.date);
return (
<View style={[styles.container, globalStyles.lightShadow]}>
<Text style={styles.month}>{month}</Text>
<Text style={styles.day}>{day}</Text>
<Text style={styles.weekDay}>{weekDay}</Text>
<Text style={styles.year}>{year}</Text>
</View>
);
}
/** Local styles */
const styles = StyleSheet.create({
container: {
alignSelf: 'flex-end',
position: 'absolute',
justifyContent: 'space-around',
alignItems: 'center',
width: 95,
aspectRatio: 3 / 4,
top: '30%',
right: 20,
transform: [{rotate: '10deg'}],
backgroundColor: ColorPalette.VERY_LIGHT_GRAY,
},
month: {
textTransform: 'uppercase',
fontSize: 16,
paddingTop: 10,
},
day: {
fontSize: 44,
fontWeight: '700',
lineHeight: 48,
},
weekDay: {
textTransform: 'capitalize',
fontWeight: '600',
fontSize: 16,
lineHeight: 16,
},
year: {
fontSize: 14,
lineHeight: 20,
paddingBottom: 10,
},
});