60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import React, { CSSProperties, FC } from "react";
|
|
import { View, Text, StyleProp, TextStyle, ViewStyle } from "react-native";
|
|
|
|
type stateBox = {
|
|
text: string;
|
|
title: string;
|
|
style?: ViewStyle;
|
|
mode?: number;
|
|
endText?: string;
|
|
};
|
|
export const StateBox: FC<stateBox> = (props) => {
|
|
const { text, title, style, mode, endText } = props;
|
|
return (
|
|
<View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), ...style }}>
|
|
<Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
|
|
<View style={{ flex: 1 }} />
|
|
<View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
|
|
<Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>{text}</Text>
|
|
</View>
|
|
{endText && (
|
|
<View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
|
|
<Text
|
|
style={{
|
|
...{ ...(mode == 2 ? boxTextStyle2 : boxTextStyle) },
|
|
fontSize: 10,
|
|
}}
|
|
>
|
|
{endText}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
const boxStyle: ViewStyle = {
|
|
flex: 1,
|
|
backgroundColor: "white",
|
|
borderRadius: 10,
|
|
padding: 10,
|
|
margin: 10,
|
|
};
|
|
const boxStyle2: ViewStyle = {
|
|
flex: 1,
|
|
backgroundColor: "white",
|
|
borderRadius: 10,
|
|
padding: 5,
|
|
margin: 5,
|
|
};
|
|
const boxTextStyle2: TextStyle = {
|
|
fontSize: 18,
|
|
color: "#0099CC",
|
|
textAlign: "right",
|
|
};
|
|
|
|
const boxTextStyle: TextStyle = {
|
|
fontSize: 25,
|
|
color: "#0099CC",
|
|
textAlign: "right",
|
|
};
|