58 lines
1.3 KiB
JavaScript
58 lines
1.3 KiB
JavaScript
import React from "react";
|
||
import { View, Text } from "react-native";
|
||
|
||
export const StateBox = ({ text, title, style, mode }) => (
|
||
<View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), ...style }}>
|
||
<Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
|
||
<View style={{ flex: 1 }} />
|
||
<View
|
||
style={{
|
||
color: "#0099CC",
|
||
textAlign: "right",
|
||
flexDirection: mode == 2 ? "row" : "column",
|
||
}}
|
||
>
|
||
{text?.match("～") ? (
|
||
<>
|
||
<Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
|
||
{text.split("～")[0]}
|
||
</Text>
|
||
<Text style={{ color: "#0099CC", textAlign: "right" }}>
|
||
{mode == 2 ? "→" : "↓"}
|
||
</Text>
|
||
<Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
|
||
{text.split("～")[1]}
|
||
</Text>
|
||
</>
|
||
) : (
|
||
<Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>{text}</Text>
|
||
)}
|
||
</View>
|
||
</View>
|
||
);
|
||
const boxStyle = {
|
||
flex: 1,
|
||
backgroundColor: "white",
|
||
borderRadius: 10,
|
||
padding: 10,
|
||
margin: 10,
|
||
};
|
||
const boxStyle2 = {
|
||
flex: 1,
|
||
backgroundColor: "white",
|
||
borderRadius: 10,
|
||
padding: 5,
|
||
margin: 5,
|
||
};
|
||
const boxTextStyle2 = {
|
||
fontSize: 18,
|
||
color: "#0099CC",
|
||
textAlign: "right",
|
||
};
|
||
|
||
const boxTextStyle = {
|
||
fontSize: 25,
|
||
color: "#0099CC",
|
||
textAlign: "right",
|
||
};
|