95 lines
1.9 KiB
TypeScript
95 lines
1.9 KiB
TypeScript
import React from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
ViewStyle,
|
|
} from "react-native";
|
|
import Feather from "../../assets/icons/chevron_rightside.svg";
|
|
import { ALERT_STYLES } from "@/constants/config";
|
|
import { Href, useRouter } from "expo-router";
|
|
|
|
type AlertType = "info" | "warning" | "danger";
|
|
|
|
interface AlertCardProps {
|
|
type: AlertType;
|
|
message: string;
|
|
subMessage?: string;
|
|
redirectPath: Href;
|
|
}
|
|
|
|
const AlertCard: React.FC<AlertCardProps> = ({
|
|
type,
|
|
message,
|
|
subMessage,
|
|
redirectPath,
|
|
}) => {
|
|
const style = ALERT_STYLES[type];
|
|
const router = useRouter();
|
|
const containerStyle: ViewStyle[] = [
|
|
styles.container,
|
|
{ backgroundColor: style.backgroundColor },
|
|
];
|
|
|
|
function handlePress() {
|
|
router.push(redirectPath);
|
|
}
|
|
return (
|
|
<TouchableOpacity
|
|
style={[containerStyle, { backgroundColor: style.backgroundColor }]}
|
|
activeOpacity={0.9}
|
|
onPress={() => handlePress()}
|
|
>
|
|
<View style={styles.leftContent}>
|
|
<style.icon />
|
|
<View style={styles.textContainer}>
|
|
<Text style={styles.text}>
|
|
<Text style={styles.boldText}>{message}</Text>
|
|
{subMessage ? `\n${subMessage}` : ""}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<Feather />
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
leftContent: {
|
|
flexDirection: "row",
|
|
gap: 8,
|
|
},
|
|
container: {
|
|
flexDirection: "row",
|
|
backgroundColor: "#E5EBFD",
|
|
borderRadius: 8,
|
|
padding: 8,
|
|
width: "100%",
|
|
alignSelf: "center",
|
|
alignItems: "flex-start",
|
|
justifyContent: "space-between",
|
|
height: 60,
|
|
marginHorizontal: 16,
|
|
},
|
|
content: {
|
|
flexDirection: "row",
|
|
gap: 8,
|
|
},
|
|
textContainer: {
|
|
marginLeft: 8,
|
|
justifyContent: "center",
|
|
},
|
|
text: {
|
|
color: "#252A34",
|
|
fontSize: 14,
|
|
lineHeight: 20,
|
|
fontFamily: "Inter-Regular",
|
|
},
|
|
boldText: {
|
|
fontWeight: "500",
|
|
},
|
|
});
|
|
|
|
export default AlertCard;
|