aboutsummaryrefslogtreecommitdiff
path: root/src/components/common
diff options
context:
space:
mode:
authorIvan Chen <ivan@thetaggid.com>2020-10-22 17:42:29 -0400
committerGitHub <noreply@github.com>2020-10-22 17:42:29 -0400
commit52a3fe743e6122d157eaab3ad7bab0c70a96676b (patch)
tree564c5df3864a0d0fe09f7c18613d4cf5a1093170 /src/components/common
parent08f9aebbaef871629323767c93c9e54cea527bed (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.tsx58
-rw-r--r--src/components/common/index.ts1
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';