[TMA-186] Instagram Taggs - Frontend (#45)

* Renamed Moments(Bar) to Taggs(Bar)

* created initial navigation and empty social media taggs screen

* made more progress for the header styling

* Finished social media taggs screen, organized code structure

* linted stuff D:

* moved bar height utility function to utils

* moved color constants to constants

* moved avatar title

* updated comments for social media taggs

* NOW the file is there

1 files changed, 47 insertions, 0 deletions

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;