61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
// Metro module 11096 (f11097).
|
|
import { View } from "react-native";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
const useStyles = createStyles({
|
|
container: {
|
|
flex: 0,
|
|
alignSelf: "stretch",
|
|
marginBottom: 8
|
|
},
|
|
title: {
|
|
lineHeight: 16,
|
|
marginBottom: 8
|
|
},
|
|
breadCrumbItemContainer: {
|
|
flexDirection: "row",
|
|
justifyContent: "flex-start",
|
|
marginBottom: 8,
|
|
marginEnd: 32,
|
|
overflow: "visible"
|
|
},
|
|
breadCrumbDot: {
|
|
marginStart: 2,
|
|
marginTop: 8,
|
|
width: 4,
|
|
height: 4,
|
|
borderRadius: 2,
|
|
backgroundColor: Module712.colors.BACKGROUND_BRAND
|
|
},
|
|
breadCrumbBar: {
|
|
position: "absolute",
|
|
width: 2,
|
|
top: 10,
|
|
bottom: -12,
|
|
left: 3,
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
|
|
},
|
|
breadCrumbText: {
|
|
marginStart: 8,
|
|
lineHeight: 20
|
|
}
|
|
});
|
|
export default function AppealIngestionBreadcrumbs(props) {
|
|
const reasons = props.reasons;
|
|
const styles = useStyles();
|
|
return reasons.length !== 0 ? <View style={styles.container}>
|
|
<Text style={styles.title} accessibilityRole="header" variant="text-xs/bold">
|
|
{intl.string(t.eQg0Ck)}
|
|
</Text>
|
|
{reasons.map((reason, index) => <View key={`${reason}+${index}`} style={styles.breadCrumbItemContainer}>
|
|
<View style={styles.breadCrumbBar} />
|
|
<View style={styles.breadCrumbDot} />
|
|
<Text lineClamp={2} ellipsizeMode="tail" style={styles.breadCrumbText} variant="text-md/medium">
|
|
{reason}
|
|
</Text>
|
|
</View>)}
|
|
</View> : null;
|
|
};
|