TMA-663-Updated Search init

1 files changed, 100 insertions, 0 deletions

diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx
new file mode 100644
index 00000000..46d5ee44
--- /dev/null
+++ b/src/components/search/SearchResultCell.tsx
@@ -0,0 +1,100 @@
+import React, {useEffect, useState} from 'react';
+import {ProfilePreviewType, PreviewType, ScreenType} from '../../types';
+import ProfilePreview from '../profile/ProfilePreview';
+import {Image, SectionList, StyleSheet, View, Text} from 'react-native';
+import {normalize} from '../../utils';
+import {defaultUserProfile} from '../../utils/users';
+import {loadImageFromURL} from '../../services';
+
+
+const SearchResultsCell: React.FC<ProfilePreviewType> = ({
+    item: {id, name, username, first_name, last_name, thumbnail_url},
+  }) => {
+    const [avatar, setAvatar] = useState('');
+    useEffect(() => {
+      (async () => {
+        const response = await loadImageFromURL(thumbnail_url);
+        if (response) {
+          setAvatar(response);
+        }
+      })();
+    }, []);
+  
+    const userCell = () => {
+      return (
+        <View
+          style={{
+            flexDirection: 'row',
+            marginHorizontal: 24,
+            marginBottom: 24,
+          }}>
+          <Image
+            defaultSource={defaultUserProfile()}
+            source={{uri: avatar}}
+            style={{width: 42, height: 42, borderRadius: 21}}
+          />
+          <View
+            style={{
+              marginLeft: 30,
+              flexDirection: 'column',
+              justifyContent: 'space-between',
+            }}>
+            <Text
+              style={{
+                fontWeight: '500',
+                fontSize: normalize(14),
+              }}>
+              {username}
+            </Text>
+            <Text
+              style={{
+                fontWeight: '500',
+                fontSize: normalize(14),
+              }}>
+              {first_name + ' ' + last_name}
+            </Text>
+          </View>
+        </View>
+      );
+    };
+  
+    const categoryCell = () => {
+      return (
+        <View
+          style={{
+            flexDirection: 'row',
+            marginHorizontal: 24,
+            marginBottom: 24,
+          }}>
+          <Image
+            defaultSource={defaultUserProfile()}
+            source={{uri: avatar}}
+            style={{width: 42, height: 42, borderRadius: 21}}
+          />
+          <View
+            style={{
+              marginLeft: 30,
+              flexDirection: 'column',
+              justifyContent: 'center',
+            }}>
+            <Text
+              style={{
+                fontWeight: '500',
+                fontSize: normalize(14),
+              }}>
+              {name}
+            </Text>
+          </View>
+        </View>
+      );
+    };
+  
+    return (
+      <>
+        {name !== undefined && categoryCell()}
+        {name === undefined && userCell()}
+      </>
+    );
+  };
+
+  export default SearchResultsCell
\ No newline at end of file