1 files changed, 213 insertions, 0 deletions
diff --git a/src/components/taggs/TwitterTaggPost.tsx b/src/components/taggs/TwitterTaggPost.tsx
new file mode 100644
index 00000000..2cc23bcf
--- /dev/null
+++ b/src/components/taggs/TwitterTaggPost.tsx
@@ -0,0 +1,213 @@
+import React from 'react';
+import {Image, Linking, StyleSheet, View} from 'react-native';
+import {Text} from 'react-native-animatable';
+import LinearGradient from 'react-native-linear-gradient';
+import {AVATAR_DIM, TAGGS_GRADIENT} from '../../constants';
+import {TwitterPostType} from '../../types';
+import {SCREEN_WIDTH} from '../../utils';
+import {DateLabel} from '../common';
+
+interface TwitterTaggPostProps {
+  ownerHandle: string;
+  post: TwitterPostType;
+}
+const TwitterTaggPost: React.FC<TwitterTaggPostProps> = ({
+  ownerHandle,
+  post,
+}) => {
+  return (
+    <View style={styles.mainContainer}>
+      {/* Retweeted? */}
+      {post.type === 'retweet' ? (
+        <Text style={styles.retweetedText}>@{ownerHandle} retweeted</Text>
+      ) : (
+        <React.Fragment />
+      )}
+      {/* Post header (avatar and handle) */}
+      <View style={styles.header}>
+        <Image
+          style={styles.avatar}
+          source={
+            post.profile_pic
+              ? {uri: post.profile_pic}
+              : require('../../assets/images/avatar-placeholder.png')
+          }
+        />
+        <Text style={styles.headerText}>@{post.handle}</Text>
+      </View>
+      {/* Tweet/Reply/Retweet Content */}
+      <View style={styles.contentContainer}>
+        {/* First part of content is text or empty */}
+        {post.text ? (
+          <Text style={styles.contentText}>{post.text}</Text>
+        ) : (
+          <React.Fragment />
+        )}
+        {/* Second part of content is an image or empty */}
+        {post.media_url ? (
+          <View style={styles.imageContainer}>
+            <Image style={styles.image} source={{uri: post.media_url}} />
+          </View>
+        ) : (
+          <React.Fragment />
+        )}
+        {/* Third part of content is the reply/retweet container or empty */}
+        {(post.type === 'reply' || post.type === 'retweet') &&
+        post.in_reply_to ? (
+          <LinearGradient
+            colors={[TAGGS_GRADIENT.start, TAGGS_GRADIENT.end]}
+            useAngle={true}
+            angle={300}
+            angleCenter={{x: 0.5, y: 0.5}}
+            style={[styles.replyGradient]}>
+            <View style={styles.replyPostContainer}>
+              <View style={styles.replyHeader}>
+                <Image
+                  style={styles.replyAvatar}
+                  source={
+                    post.in_reply_to.profile_pic
+                      ? {uri: post.in_reply_to.profile_pic}
+                      : require('../../assets/images/avatar-placeholder.png')
+                  }
+                />
+                <Text style={styles.replyHandleText}>
+                  @{post.in_reply_to.handle}
+                </Text>
+                <DateLabel
+                  timestamp={post.in_reply_to.timestamp}
+                  type={'short'}
+                  decorate={(date) => ` • ${date}`}
+                />
+              </View>
+              <Text style={styles.replyText} numberOfLines={2}>
+                {post.in_reply_to.text}
+              </Text>
+              <Text
+                style={styles.replyShowThisThread}
+                onPress={() => {
+                  if (post.in_reply_to?.permalink) {
+                    Linking.openURL(post.in_reply_to.permalink);
+                  }
+                }}>
+                Show this thread
+              </Text>
+            </View>
+          </LinearGradient>
+        ) : (
+          <React.Fragment />
+        )}
+      </View>
+      {/* Footer */}
+      <View style={styles.footer}>
+        <DateLabel timestamp={post.timestamp} type={'default'} />
+        <Text
+          style={styles.viewOnTwitterText}
+          onPress={() => {
+            if (post.permalink) {
+              Linking.openURL(post.permalink);
+            }
+          }}>
+          View on Twitter
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    marginHorizontal: 10,
+    marginBottom: 50,
+  },
+  retweetedText: {
+    fontSize: 12,
+    color: 'grey',
+    marginBottom: 20,
+  },
+  header: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginBottom: 30,
+  },
+  avatar: {
+    width: AVATAR_DIM,
+    height: AVATAR_DIM,
+    borderRadius: AVATAR_DIM / 2,
+  },
+  headerText: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    color: 'white',
+    paddingHorizontal: 12,
+  },
+  contentContainer: {},
+  contentText: {
+    fontSize: 18,
+    color: 'white',
+    marginBottom: 30,
+  },
+  // image media
+  imageContainer: {
+    marginBottom: 30,
+  },
+  image: {
+    width: SCREEN_WIDTH - 20,
+    height: SCREEN_WIDTH - 20,
+    backgroundColor: '#eee',
+    borderRadius: 15,
+  },
+  // footer
+  footer: {
+    height: 50,
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    marginBottom: 50,
+  },
+  viewOnTwitterText: {
+    fontSize: 12,
+    color: '#6ee7e7',
+  },
+  // reply post
+  replyPostContainer: {
+    flex: 1,
+    marginVertical: 1,
+    paddingHorizontal: 10,
+    width: SCREEN_WIDTH - 22,
+    justifyContent: 'space-between',
+    paddingTop: 10,
+    paddingBottom: 20,
+    borderRadius: 15,
+    backgroundColor: '#1d0034',
+  },
+  replyGradient: {
+    height: 150,
+    borderRadius: 15,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 30,
+  },
+  replyHeader: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  replyAvatar: {
+    height: AVATAR_DIM / 2,
+    width: AVATAR_DIM / 2,
+    borderRadius: AVATAR_DIM / 2 / 2,
+  },
+  replyHandleText: {
+    fontSize: 15,
+    color: '#c4c4c4',
+    paddingLeft: 7,
+  },
+  replyText: {
+    fontSize: 15,
+    color: 'white',
+  },
+  replyShowThisThread: {
+    fontSize: 15,
+    color: '#698dd3',
+  },
+});
+
+export default TwitterTaggPost;