1 files changed, 71 insertions, 0 deletions
diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
new file mode 100644
index 00000000..02840d47
--- /dev/null
+++ b/src/components/comments/CommentTile.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import {Text, View} from 'react-native-animatable';
+import {ProfilePreview} from '../profile';
+import {CommentType} from '../../types';
+import {StyleSheet} from 'react-native';
+import {getTimePosted} from '../../utils';
+import ClockIcon from '../../assets/icons/clock-icon-01.svg';
+
+/**
+ * Displays users's profile picture, comment posted by them and the time difference between now and when a comment was posted.
+ */
+
+interface CommentTileProps {
+  comment_object: CommentType;
+}
+
+const CommentTile: React.FC<CommentTileProps> = ({comment_object}) => {
+  const timePosted = getTimePosted(comment_object.date_time);
+  return (
+    <View style={styles.container}>
+      <ProfilePreview
+        profilePreview={{
+          id: comment_object.commenter__id,
+          username: comment_object.commenter__username,
+          first_name: '',
+          last_name: '',
+        }}
+        isComment={true}
+      />
+      <View style={styles.body}>
+        <Text style={styles.comment}>{comment_object.comment}</Text>
+        <View style={styles.clockIconAndTime}>
+          <ClockIcon style={styles.clockIcon} />
+          <Text style={styles.date_time}>{' ' + timePosted}</Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginLeft: '3%',
+    marginRight: '3%',
+    borderBottomWidth: 1,
+    borderColor: 'lightgray',
+    marginBottom: '3%',
+  },
+  body: {
+    marginLeft: 56,
+  },
+  comment: {
+    position: 'relative',
+    top: -5,
+    marginBottom: '2%',
+  },
+  date_time: {
+    color: 'gray',
+  },
+  clockIcon: {
+    width: 12,
+    height: 12,
+    alignSelf: 'center',
+  },
+  clockIconAndTime: {
+    flexDirection: 'row',
+    marginBottom: '3%',
+  },
+});
+
+export default CommentTile;