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 | 2x 4x 4x 4x 4x | import { ReactNode } from "react";
import { Text, TouchableOpacity, View } from "react-native";
import { ChevronLeftIcon } from "@repo/ui/icons/ChevronLeft";
import { makeStyles } from "@repo/ui/themes/makeStyles";
import { useTheme } from "@repo/ui/themes/ThemeContext";
export interface HeaderRequestProps {
title: string;
onBack: () => void;
disabled?: boolean;
rightComponent?: ReactNode;
}
export const HeaderRequest = ({
title,
onBack,
disabled,
rightComponent,
}: HeaderRequestProps) => {
const { theme } = useTheme();
const styles = useStyles();
return (
<View style={styles.header}>
<TouchableOpacity
onPress={onBack}
hitSlop={20}
accessibilityLabel="Back Button"
accessibilityRole="button"
disabled={disabled}
style={[styles.backButton, disabled && styles.backButtonDisabled]}
>
<ChevronLeftIcon
width={theme.metrics.iconSize[24]}
height={theme.metrics.iconSize[24]}
/>
</TouchableOpacity>
<Text style={styles.title}>{title}</Text>
{rightComponent ? rightComponent : <View style={styles.spacer} />}
</View>
);
};
const useStyles = makeStyles((theme) => ({
header: {
paddingHorizontal: theme.metrics.spacing[4],
paddingVertical: theme.metrics.spacing[2],
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
},
title: {
fontSize: theme.metrics.textSize[20],
paddingRight: theme.metrics.spacing[4],
fontWeight: theme.metrics.fontWeight.semiBold,
color: theme.colors.text.default,
},
spacer: {
width: theme.metrics.spacing[6],
},
backButton: {
padding: theme.metrics.spacing[2],
},
backButtonDisabled: {
opacity: theme.metrics.opacity[30],
},
}));
|