1 files changed, 59 insertions, 0 deletions
diff --git a/src/components/messages/MessagesHeader.tsx b/src/components/messages/MessagesHeader.tsx
new file mode 100644
index 00000000..660da97d
--- /dev/null
+++ b/src/components/messages/MessagesHeader.tsx
@@ -0,0 +1,59 @@
+import React, {Fragment, useContext} from 'react';
+import {StyleSheet, View} from 'react-native';
+import {Text} from 'react-native-animatable';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {normalize} from '../../utils';
+import ComposeIcon from '../../assets/icons/compose.svg';
+import {ChatContext} from '../../App';
+
+type MessagesHeaderProps = {
+  createChannel: () => void;
+};
+
+const MessagesHeader: React.FC<MessagesHeaderProps> = ({createChannel}) => {
+  const {chatClient} = useContext(ChatContext);
+  const unread = chatClient.user?.total_unread_count as number;
+  return (
+    <View style={styles.header}>
+      <Text style={styles.headerText}>Messages</Text>
+      {unread && unread !== 0 ? (
+        <Text style={styles.unreadText}>
+          {unread > 99 ? '99+' : unread} unread
+        </Text>
+      ) : (
+        <Fragment />
+      )}
+      <View style={styles.flex} />
+      <TouchableOpacity style={styles.compose} onPress={createChannel}>
+        <ComposeIcon width={normalize(20)} height={normalize(20)} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  header: {
+    marginHorizontal: '8%',
+    marginTop: '5%',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  headerText: {
+    fontWeight: '700',
+    fontSize: normalize(18),
+    lineHeight: normalize(21),
+  },
+  unreadText: {
+    color: '#8F01FF',
+    marginLeft: 10,
+    fontWeight: '700',
+    lineHeight: normalize(17),
+    fontSize: normalize(14),
+  },
+  compose: {},
+});
+
+export default MessagesHeader;