diff options
Diffstat (limited to 'src/components/profile')
| -rw-r--r-- | src/components/profile/Content.tsx | 4 | ||||
| -rw-r--r-- | src/components/profile/Feed.tsx | 3 | ||||
| -rw-r--r-- | src/components/profile/Moment.tsx | 35 | ||||
| -rw-r--r-- | src/components/profile/MomentsBar.tsx | 75 | ||||
| -rw-r--r-- | src/components/profile/index.ts | 1 |
5 files changed, 4 insertions, 114 deletions
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx index 49cc2c35..206fd9e4 100644 --- a/src/components/profile/Content.tsx +++ b/src/components/profile/Content.tsx @@ -6,7 +6,7 @@ import {UserType} from '../../types'; import ProfileCutout from './ProfileCutout'; import ProfileHeader from './ProfileHeader'; import ProfileBody from './ProfileBody'; -import MomentsBar from './MomentsBar'; +import TaggsBar from '../taggs/TaggsBar'; import Feed from './Feed'; interface ContentProps { @@ -30,7 +30,7 @@ const Content: React.FC<ContentProps> = ({y, user}) => { <ProfileHeader /> </ProfileCutout> <ProfileBody {...{onLayout}} /> - <MomentsBar {...{y, profileBodyHeight}} /> + <TaggsBar {...{y, profileBodyHeight}} /> <Feed {...{user}} /> </Animated.ScrollView> ); diff --git a/src/components/profile/Feed.tsx b/src/components/profile/Feed.tsx index a10d8d6d..3353d25b 100644 --- a/src/components/profile/Feed.tsx +++ b/src/components/profile/Feed.tsx @@ -12,8 +12,9 @@ const Feed: React.FC<FeedProps> = ({user}) => { for (let i = 0; i < 10; i++) { const testPost: PostType = { owner: user, - instagram: instaPosts[i], social: 'Instagram', + socialHandle: 'igHandle', + data: instaPosts[i], }; posts.push(testPost); } diff --git a/src/components/profile/Moment.tsx b/src/components/profile/Moment.tsx deleted file mode 100644 index eaf43fea..00000000 --- a/src/components/profile/Moment.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import {View, StyleSheet, ViewProps} from 'react-native'; -import LinearGradient from 'react-native-linear-gradient'; - -interface MomentProps extends ViewProps {} -const Moment: React.FC<MomentProps> = ({style}) => { - return ( - <LinearGradient - colors={['#9F00FF', '#27EAE9']} - useAngle={true} - angle={154.72} - angleCenter={{x: 0.5, y: 0.5}} - style={[styles.gradient, style]}> - <View style={styles.image} /> - </LinearGradient> - ); -}; - -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 Moment; diff --git a/src/components/profile/MomentsBar.tsx b/src/components/profile/MomentsBar.tsx deleted file mode 100644 index dcc88d89..00000000 --- a/src/components/profile/MomentsBar.tsx +++ /dev/null @@ -1,75 +0,0 @@ -// @refresh react -import React from 'react'; -import {StyleSheet} from 'react-native'; -import Animated from 'react-native-reanimated'; -import Moment from './Moment'; -import {PROFILE_CUTOUT_BOTTOM_Y} from '../../constants'; -import {StatusBarHeight} from '../../utils'; - -const {View, ScrollView, interpolate, Extrapolate} = Animated; -interface MomentsBarProps { - y: Animated.Value<number>; - profileBodyHeight: number; -} -const MomentsBar: React.FC<MomentsBarProps> = ({y, profileBodyHeight}) => { - const moments: Array<JSX.Element> = []; - for (let i = 0; i < 10; i++) { - moments.push(<Moment key={i} style={styles.moment} />); - } - 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}> - {moments} - </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, - }, - moment: { - marginHorizontal: 14, - }, -}); - -export default MomentsBar; diff --git a/src/components/profile/index.ts b/src/components/profile/index.ts index 2052ee5b..e0ca5742 100644 --- a/src/components/profile/index.ts +++ b/src/components/profile/index.ts @@ -1,7 +1,6 @@ export {default as Cover} from './Cover'; export {default as Content} from './Content'; export {default as ProfileCutout} from './ProfileCutout'; -export {default as MomentsBar} from './MomentsBar'; export {default as ProfileBody} from './ProfileBody'; export {default as ProfileHeader} from './ProfileHeader'; export {default as Feed} from './Feed'; |
