62 lines
2.3 KiB
TypeScript
62 lines
2.3 KiB
TypeScript
// Metro module 5530 (f5531).
|
|
import { ActivityIndicator, 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";
|
|
import { CircleCheckIcon } from "../../../design/components/Icon/native/redesign/generated/CircleCheckIcon";
|
|
import { Button } from "../../../design/components/Button/native/Button.native";
|
|
const useStyles = createStyles({
|
|
card: {
|
|
backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
|
|
borderRadius: Module712.radii.md,
|
|
borderWidth: 1,
|
|
borderColor: Module712.colors.BORDER_SUBTLE,
|
|
padding: Module712.space.PX_16,
|
|
marginBottom: Module712.space.PX_12,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between"
|
|
},
|
|
leftContent: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
flex: 1,
|
|
marginRight: Module712.space.PX_12
|
|
},
|
|
icon: {
|
|
width: 32,
|
|
height: 32,
|
|
marginRight: Module712.space.PX_12,
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
},
|
|
textContent: {
|
|
flex: 1
|
|
},
|
|
connectedStatus: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: Module712.space.PX_8
|
|
}
|
|
});
|
|
export default function ConnectionCardView(props) {
|
|
const { displayName, description, icon, isLoading, isConnected, canConnect, onConnect } = props;
|
|
const styles = useStyles();
|
|
return <View style={styles.card}>
|
|
<View style={styles.leftContent}>
|
|
<View style={styles.icon}>{icon}</View>
|
|
<View style={styles.textContent}>
|
|
<Text variant="text-md/medium" color="text-strong">{displayName}</Text>
|
|
{description != null && description.length > 0 && <Text variant="text-sm/normal" color="text-subtle">{description}</Text>}
|
|
</View>
|
|
</View>
|
|
{isLoading ? <ActivityIndicator size="small" /> : isConnected ? <View style={styles.connectedStatus}>
|
|
<Text variant="text-sm/medium" color="text-feedback-positive">
|
|
{intl.string(t["LV+CXH"])}
|
|
</Text>
|
|
<CircleCheckIcon size="sm" color="status-positive" />
|
|
</View> : <Button variant="primary" size="sm" onPress={onConnect} text={intl.string(t.S0W8Z5)} disabled={!canConnect} />}
|
|
</View>;
|
|
};
|