diff options
author | Ivan Chen <ivan@thetaggid.com> | 2020-10-22 17:42:29 -0400 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-10-22 17:42:29 -0400 |
commit | 52a3fe743e6122d157eaab3ad7bab0c70a96676b (patch) | |
tree | 564c5df3864a0d0fe09f7c18613d4cf5a1093170 /src/components/common | |
parent | 08f9aebbaef871629323767c93c9e54cea527bed (diff) |
[TMA-242] Twitter and Facebook Tagg View (#63)
* modified the way we store social media data, initial skeleton
* MVP? Twitter done?
* cleaned up some things
* forgot to lint and cleaned up some more code
* minor change to text display
* fixed some UI bug, linting, and minor adjustment to posts UI
* fixed a couple of things
* added DateLabel, Facebook taggs view, fixed minor stuff
* Some small changes for the PR
* removed unused Feed
Co-authored-by: Ashm Walia <ashmwalia@outlook.com>
Diffstat (limited to 'src/components/common')
-rw-r--r-- | src/components/common/DateLabel.tsx | 58 | ||||
-rw-r--r-- | src/components/common/index.ts | 1 |
2 files changed, 59 insertions, 0 deletions
diff --git a/src/components/common/DateLabel.tsx b/src/components/common/DateLabel.tsx new file mode 100644 index 00000000..145c614c --- /dev/null +++ b/src/components/common/DateLabel.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import {StyleSheet, Text} from 'react-native'; +import moment from 'moment'; + +interface DateLabelProps { + timestamp: string; + type: 'default' | 'short' | 'small'; + decorate?: (date: string) => string; +} + +const DateLabel: React.FC<DateLabelProps> = ({ + timestamp, + type, + decorate = (date) => `${date}`, +}) => { + let parsedDate = moment(timestamp); + + if (!parsedDate) { + return <React.Fragment />; + } + + switch (type) { + case 'default': + return ( + <Text style={styles.default}> + {decorate(parsedDate.format('h:mm a • MMM D, YYYY'))} + </Text> + ); + + case 'short': + return ( + <Text style={styles.default}> + {decorate(parsedDate.format('MMM D'))} + </Text> + ); + + case 'small': + return ( + <Text style={styles.smallAndBlue}> + {decorate(parsedDate.format('MMM D'))} + </Text> + ); + } +}; + +const styles = StyleSheet.create({ + default: { + fontSize: 15, + color: '#c4c4c4', + }, + smallAndBlue: { + fontSize: 14, + fontWeight: 'bold', + color: '#8FA9C2', + }, +}); + +export default DateLabel; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index cb9d641b..cd72a70b 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -8,4 +8,5 @@ export {default as SocialIcon} from './SocialIcon'; export {default as TabsGradient} from './TabsGradient'; export {default as RecentSearches} from '../search/RecentSearches'; export {default as LoadingIndicator} from './LoadingIndicator'; +export {default as DateLabel} from './DateLabel'; export * from './post'; |