Grapevine_Disease_Detection/VinEye/src/components/home/SeasonAlert.tsx
Yanis af299e816a add new screens + home components + replace colors with theme tokens
New screens: Guides, Library, Map, Notifications, Settings.
Home refactored with modular components (SearchHeader, HomeCta, FrequentDiseases, SeasonAlert, PracticalGuides).
Replaced hardcoded colors with theme tokens in SeasonAlert and HomeCta.
Updated navigation, i18n, and CLAUDE.md.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-02 22:05:19 +02:00

105 lines
2.5 KiB
TypeScript

import { View, TouchableOpacity, StyleSheet } from "react-native";
import { useTranslation } from "react-i18next";
import { Ionicons } from "@expo/vector-icons";
import { Text } from "@/components/ui/text";
import { colors } from "@/theme/colors";
const CURRENT_ALERT = {
type: "warning" as const,
title: "Stay in the know",
message: "Get alerts on your money activity and budgets",
};
export default function SeasonAlert() {
const { t } = useTranslation();
return (
<View style={styles.container}>
<View style={styles.content}>
{/* Bouton Fermer */}
<TouchableOpacity style={styles.closeButton} activeOpacity={0.7}>
<Ionicons name="close" size={18} color={colors.primary[900]} />
</TouchableOpacity>
{/* Contenu Texte */}
<View style={styles.textContainer}>
<Text style={styles.title}>{t(CURRENT_ALERT.title)}</Text>
<Text style={styles.message}>{t(CURRENT_ALERT.message)}</Text>
</View>
{/* Bouton d'action */}
<TouchableOpacity style={styles.actionButton} activeOpacity={0.7}>
<Text style={styles.actionText}>{t("Allow notifications")}</Text>
</TouchableOpacity>
{/* Illustration decorative */}
<View style={styles.decoration}>
<Ionicons name="notifications" size={100} color={colors.primary[300]} />
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
marginHorizontal: 20,
marginBottom: 24,
borderRadius: 28,
backgroundColor: colors.primary[200],
overflow: "hidden",
},
content: {
position: "relative",
padding: 24,
},
closeButton: {
position: "absolute",
right: 16,
top: 16,
height: 32,
width: 32,
alignItems: "center",
justifyContent: "center",
borderRadius: 16,
backgroundColor: colors.primary[300],
zIndex: 1,
},
textContainer: {
paddingRight: 48,
},
title: {
fontSize: 22,
fontWeight: "700",
letterSpacing: -0.5,
color: colors.primary[900],
},
message: {
marginTop: 8,
fontSize: 16,
lineHeight: 24,
color: colors.primary[800],
opacity: 0.6,
},
actionButton: {
marginTop: 24,
alignSelf: "flex-start",
borderRadius: 12,
backgroundColor: colors.primary[400],
paddingHorizontal: 24,
paddingVertical: 12,
elevation: 2,
},
actionText: {
fontSize: 16,
fontWeight: "700",
color: colors.primary[900],
},
decoration: {
position: "absolute",
bottom: -16,
right: -16,
opacity: 0.8,
},
});