125 lines
3.3 KiB
JavaScript
125 lines
3.3 KiB
JavaScript
import {View, Text} from "react-native";
|
|
import {LinearGradient} from "expo-linear-gradient";
|
|
|
|
const Card = {
|
|
Block: ({variant, image, children, tooltip}) => {
|
|
|
|
const variantSelection = {
|
|
default: ["rgba(100, 101, 103, 0.20)", "rgba(100, 101, 103, 0.0)"],
|
|
success: ["rgba(26, 117, 18, 0.20)", "rgba(26, 117, 18, 0.0)"],
|
|
danger: ['rgba(210, 145, 21, 0.20)', 'rgba(210, 145, 21, 0.0)'],
|
|
error: ["rgba(229,53,45, 0.20)", "rgba(229,53,45, 0.0)"]
|
|
}
|
|
|
|
const AddData = () => {
|
|
if (!!image && !!tooltip) {
|
|
return (<View style={{width: "10%"}}>
|
|
{image}
|
|
</View>)
|
|
}
|
|
if (!!image) {
|
|
|
|
return <View style={{width: "10%"}}>
|
|
{image}
|
|
</View>
|
|
}
|
|
|
|
// if (!!tooltip) {
|
|
// return <View style={{width: "10%"}}>
|
|
// </View>
|
|
// }
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
return (
|
|
<View style={{marginBottom: 16}}>
|
|
<LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}}
|
|
colors={variant ? variantSelection[variant] : variantSelection.default}
|
|
style={{
|
|
padding: 16,
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between"
|
|
}}
|
|
>
|
|
{!!tooltip && tooltip}
|
|
<View style={{width: !!image ? "80%" : "100%"}}>
|
|
|
|
{children}
|
|
</View>
|
|
|
|
<AddData />
|
|
|
|
|
|
</LinearGradient>
|
|
|
|
</View>
|
|
)
|
|
|
|
},
|
|
|
|
Header: ({children}) => {
|
|
return (
|
|
<View style={{marginBottom: 20}}>
|
|
{children}
|
|
</View>
|
|
)
|
|
},
|
|
|
|
Body: ({children}) => {
|
|
return (
|
|
<View>
|
|
{children}
|
|
</View>
|
|
)
|
|
},
|
|
|
|
TitleNumber: ({children}) => {
|
|
return (<>
|
|
<Text style={{fontSize: 16, fontWeight: "bold", marginBottom: 10, color: "#0F0F0F"}}>{children}</Text>
|
|
</>)
|
|
},
|
|
|
|
TitleHeader: ({children}) => {
|
|
return (
|
|
<>
|
|
<Text style={{fontSize: 20, fontWeight: "bold", marginBottom: 10, color: "#0F0F0F"}}>{children}</Text>
|
|
</>
|
|
)
|
|
},
|
|
|
|
TextSmall: ({children, style, ...props}) => {
|
|
return (
|
|
<>
|
|
<Text style={{
|
|
fontSize: 16,
|
|
fontWeight: "bold",
|
|
// marginBottom: 10,
|
|
color: "rgba(16,17,17,0.4)",
|
|
...style
|
|
}} {...props}>{children}</Text>
|
|
</>
|
|
|
|
)
|
|
|
|
},
|
|
|
|
TitleExtra: ({children}) => {
|
|
return (
|
|
<>
|
|
<Text style={{
|
|
fontSize: 32,
|
|
fontWeight: "bold",
|
|
marginBottom: 10,
|
|
color: "rgba(16,17,17,0.4)"
|
|
}}>{children}</Text>
|
|
</>
|
|
)
|
|
}
|
|
|
|
}
|
|
|
|
export default Card |