Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | 2x 6x 6x 6x 6x 2x 4x 1x 3x 6x 18x 6x | import { useMemo } from 'react';
import { View } from 'react-native';
import { HeaderRequestV2 } from '@repo/ui/components/HeaderRequestV2';
import { ScreenLayout } from '@repo/ui/components/ScreenLayout';
import { makeStyles } from '@repo/ui/themes/makeStyles';
import { useProfileSteps } from './hooks';
import { IncomingRequests } from './IncomingRequests';
import { MyRequests } from './MyRequests';
import { Settings } from './Settings';
export const ProfileScreen = () => {
const styles = useStyles();
const { activeStep, activeStepIndex, activeHeader, profileSteps, panHandlers, handleBackStep } =
useProfileSteps();
const activeStepContent = useMemo(() => {
if (activeStep === 'my') {
return <MyRequests />;
}
if (activeStep === 'settings') {
return <Settings />;
}
return <IncomingRequests />;
}, [activeStep]);
return (
<ScreenLayout style={styles.container}>
<View style={styles.headerWrap}>
<HeaderRequestV2
title={activeHeader.title}
image={activeHeader.image}
titleStyle={styles.headerTitle}
isShowBackButton
isShowCloseButton={false}
onBackStep={handleBackStep}
onClose={handleBackStep}
/>
</View>
<View style={styles.stepPage} {...panHandlers}>
{activeStepContent}
</View>
<View style={styles.steps}>
{profileSteps.map((step, index) => (
<View
key={step}
style={[styles.stepDot, index === activeStepIndex && styles.stepDotActive]}
/>
))}
</View>
</ScreenLayout>
);
};
const useStyles = makeStyles(theme => ({
container: {
flex: 1,
paddingTop: theme.metrics.spacing[2],
paddingBottom: theme.metrics.spacing[3],
backgroundColor: theme.colors.background.pageMuted,
},
headerWrap: {
paddingHorizontal: theme.metrics.spacing[2.5],
},
headerTitle: {
textTransform: 'uppercase',
},
stepPage: {
flex: 1,
paddingHorizontal: theme.metrics.spacing[2.5],
},
steps: {
paddingTop: theme.metrics.spacing[1],
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
gap: theme.metrics.spacing[2],
},
stepDot: {
width: theme.metrics.spacing[2],
height: theme.metrics.spacing[2],
borderRadius: theme.metrics.borderRadius.circle,
backgroundColor: theme.colors.badge.dot,
},
stepDotActive: {
backgroundColor: theme.colors.text.heading,
},
}));
|