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 | 2x 12x 12x 12x | // ReasonItem.tsx
import { JSX } from "react";
import { Pressable, Text, View } from "react-native";
import { makeStyles } from "@repo/ui/themes/makeStyles";
import { Theme } from "@repo/ui/themes/types";
import { textStyles } from "@repo/ui/themes/typography";
import { TickCircleV2Icon } from "../../../icons";
export interface BriefReasonItem {
label: string;
icon: JSX.Element;
}
interface Props {
item: BriefReasonItem;
selected: boolean;
onPress: () => void;
}
export const ReasonItem = ({ item, selected, onPress }: Props) => {
const styles = useStyles();
return (
<Pressable
style={styles.container}
onPress={onPress}
accessibilityRole="button"
accessibilityLabel={`Select reason: ${item.label}`}
accessibilityState={{ selected }}
>
<View>{item.icon}</View>
<View style={styles.lineWrapper}>
<View style={styles.line} />
{selected && (
<View style={styles.checkBadge}>
<TickCircleV2Icon />
</View>
)}
</View>
<Text style={styles.label} numberOfLines={2}>
{item.label}
</Text>
</Pressable>
);
};
const useStyles = makeStyles((theme: Theme) => ({
container: {
alignItems: "center",
marginRight: 60,
},
lineWrapper: {
height: 110,
justifyContent: "flex-end",
alignItems: "center",
position: "relative",
marginVertical: 6,
},
line: {
position: "absolute",
top: 0,
bottom: 0,
width: 1,
backgroundColor: theme.colors.gray100,
},
checkBadge: {
backgroundColor: theme.colors.white,
position: "absolute",
bottom: -2,
alignItems: "center",
justifyContent: "center",
borderRadius: 12,
},
label: {
textAlign: "center",
fontSize: 16,
...textStyles.content.regular,
},
}));
|