7 files changed, 314 insertions, 0 deletions
diff --git a/src/components/taggs/SocialMediaInfo.tsx b/src/components/taggs/SocialMediaInfo.tsx
new file mode 100644
index 00000000..0e93660d
--- /dev/null
+++ b/src/components/taggs/SocialMediaInfo.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import {SocialIcon} from '..';
+
+interface SocialMediaInfoProps {
+  fullname: string;
+  type: string;
+  handle: string;
+}
+
+const SocialMediaInfo: React.FC<SocialMediaInfoProps> = ({
+  fullname,
+  type,
+  handle,
+}) => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.handle}> @{handle} </Text>
+      <View style={styles.row}>
+        <View />
+        <SocialIcon style={styles.icon} social={type} />
+        <Text style={styles.name}>{fullname}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    paddingBottom: 40,
+  },
+  handle: {
+    color: 'white',
+    fontSize: 12,
+  },
+  name: {
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: 20,
+    paddingLeft: 5,
+  },
+  icon: {
+    width: 20,
+    height: 20,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 10,
+  },
+});
+
+export default SocialMediaInfo;
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
new file mode 100644
index 00000000..9a5ec1e2
--- /dev/null
+++ b/src/components/taggs/Tagg.tsx
@@ -0,0 +1,47 @@
+import {useNavigation} from '@react-navigation/native';
+import React from 'react';
+import {StyleSheet, TouchableOpacity, View, ViewProps} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { TAGGS_GRADIENT } from '../../constants';
+
+interface TaggProps extends ViewProps {}
+
+const Tagg: React.FC<TaggProps> = ({style}) => {
+  const navigation = useNavigation();
+
+  return (
+    <TouchableOpacity
+      onPress={() =>
+        navigation.navigate('SocialMediaTaggs', {
+          socialMediaType: 'Instagram',
+        })
+      }>
+      <LinearGradient
+        colors={[TAGGS_GRADIENT.start, TAGGS_GRADIENT.end]}
+        useAngle={true}
+        angle={154.72}
+        angleCenter={{x: 0.5, y: 0.5}}
+        style={[styles.gradient, style]}>
+        <View style={styles.image} />
+      </LinearGradient>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradient: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  image: {
+    width: 72,
+    height: 72,
+    borderRadius: 37.5,
+    backgroundColor: 'pink',
+  },
+});
+
+export default Tagg;
diff --git a/src/components/taggs/TaggPost.tsx b/src/components/taggs/TaggPost.tsx
new file mode 100644
index 00000000..73f15268
--- /dev/null
+++ b/src/components/taggs/TaggPost.tsx
@@ -0,0 +1,39 @@
+import moment from 'moment';
+import React from 'react';
+import {Image, StyleSheet, View} from 'react-native';
+import {PostType} from '../../types';
+import {SCREEN_WIDTH} from '../../utils';
+import TaggPostFooter from './TaggPostFooter';
+
+interface TaggPostProps {
+  post: PostType;
+}
+const TaggPost: React.FC<TaggPostProps> = ({post: {socialHandle, data}}) => {
+  const parsedDate = moment(data?.timestamp || '');
+  const date = parsedDate.isValid() ? parsedDate.format('MMM d') : '';
+
+  return (
+    <>
+      <View style={styles.image}>
+        {data && <Image style={styles.image} source={{uri: data.media_url}} />}
+      </View>
+      <TaggPostFooter
+        // we currently don't have a way to retreive num of likes information
+        likes={109}
+        handle={socialHandle}
+        caption={data?.caption || ''}
+        date={date}
+      />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  image: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_WIDTH,
+    backgroundColor: '#eee',
+  },
+});
+
+export default TaggPost;
diff --git a/src/components/taggs/TaggPostFooter.tsx b/src/components/taggs/TaggPostFooter.tsx
new file mode 100644
index 00000000..024670a8
--- /dev/null
+++ b/src/components/taggs/TaggPostFooter.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import {StyleSheet, View} from 'react-native';
+import {Text} from 'react-native-animatable';
+
+interface TaggPostFooterProps {
+  likes: number;
+  handle: string;
+  caption: string;
+  date: string;
+}
+const TaggPostFooter: React.FC<TaggPostFooterProps> = ({
+  likes,
+  handle,
+  caption,
+  date,
+}) => {
+  return (
+    <View>
+      <View style={styles.container}>
+        <Text style={styles.likeText}>{likes} likes</Text>
+        <View style={styles.captionContainer}>
+          <Text style={styles.handleText}>
+            {handle}
+            <Text style={styles.captionText}> {caption}</Text>
+          </Text>
+        </View>
+        <Text style={styles.dateText}>{date}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    padding: 10,
+    paddingBottom: '10%',
+  },
+  captionContainer: {
+    paddingVertical: 10,
+  },
+  likeText: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: 'white',
+  },
+  handleText: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: '#8FA9C2',
+  },
+  captionText: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: 'white',
+    flexWrap: 'wrap',
+  },
+  dateText: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: '#8FA9C2',
+  },
+});
+
+export default TaggPostFooter;
diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx
new file mode 100644
index 00000000..1022c4fc
--- /dev/null
+++ b/src/components/taggs/TaggsBar.tsx
@@ -0,0 +1,75 @@
+// @refresh react
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import Animated from 'react-native-reanimated';
+import Tagg from './Tagg';
+import {PROFILE_CUTOUT_BOTTOM_Y} from '../../constants';
+import {StatusBarHeight} from '../../utils';
+
+const {View, ScrollView, interpolate, Extrapolate} = Animated;
+interface TaggsBarProps {
+  y: Animated.Value<number>;
+  profileBodyHeight: number;
+}
+const TaggsBar: React.FC<TaggsBarProps> = ({y, profileBodyHeight}) => {
+  const taggs: Array<JSX.Element> = [];
+  for (let i = 0; i < 10; i++) {
+    taggs.push(<Tagg key={i} style={styles.tagg} />);
+  }
+  const shadowOpacity: Animated.Node<number> = interpolate(y, {
+    inputRange: [
+      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight,
+      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight + 20,
+    ],
+    outputRange: [0, 0.2],
+    extrapolate: Extrapolate.CLAMP,
+  });
+  const paddingTop: Animated.Node<number> = interpolate(y, {
+    inputRange: [
+      0,
+      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight - 30,
+      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight,
+    ],
+    outputRange: [20, 20, StatusBarHeight],
+    extrapolate: Extrapolate.CLAMP,
+  });
+  const paddingBottom: Animated.Node<number> = interpolate(y, {
+    inputRange: [
+      0,
+      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight - 30,
+      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight,
+    ],
+    outputRange: [30, 30, 15],
+    extrapolate: Extrapolate.CLAMP,
+  });
+  return (
+    <View style={[styles.container, {shadowOpacity}]}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={{paddingTop, paddingBottom}}
+        contentContainerStyle={styles.contentContainer}>
+        {taggs}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'white',
+    shadowColor: '#000',
+    shadowRadius: 10,
+    shadowOffset: {width: 0, height: 2},
+    zIndex: 1,
+  },
+  contentContainer: {
+    alignItems: 'center',
+    paddingHorizontal: 15,
+  },
+  tagg: {
+    marginHorizontal: 14,
+  },
+});
+
+export default TaggsBar;
diff --git a/src/components/taggs/TaggsFeed.tsx b/src/components/taggs/TaggsFeed.tsx
new file mode 100644
index 00000000..3f27e248
--- /dev/null
+++ b/src/components/taggs/TaggsFeed.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import {InstagramPostType, UserType} from '../../types';
+import {TaggPost} from './';
+
+interface TaggsFeedProps {
+  user: UserType;
+  socialHandle: string;
+  posts: Array<InstagramPostType>;
+}
+
+const TaggsFeed: React.FC<TaggsFeedProps> = ({user, socialHandle, posts}) => {
+  return (
+    <>
+      {posts?.map((post, index) => (
+        <TaggPost
+          key={index}
+          post={{
+            owner: user,
+            social: 'Instagram',
+            socialHandle: socialHandle,
+            data: post,
+          }}
+        />
+      ))}
+    </>
+  );
+};
+
+export default TaggsFeed;
diff --git a/src/components/taggs/index.ts b/src/components/taggs/index.ts
new file mode 100644
index 00000000..1cb0c412
--- /dev/null
+++ b/src/components/taggs/index.ts
@@ -0,0 +1,4 @@
+export {default as TaggsBar} from './TaggsBar';
+export {default as SocialMediaInfo} from './SocialMediaInfo';
+export {default as TaggsFeed} from './TaggsFeed';
+export {default as TaggPost} from './TaggPost';