Azmog
ca88bf7737
- palette officielle DSFR (#000091, rouge Marianne, gris DSFR) dans lib/colors.ts - composant RepubliqueHeader (bloc « République Française » + service CESIZen) - restyle boutons/champs/cartes/onglets/urgence au style gouv.fr sur tous les écrans - couleurs d'émotions conservées Le DSFR étant un framework web, le mobile en reçoit l'identité visuelle (pas les classes fr-*). tsc 0. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
import { View, Text, StyleSheet } from 'react-native';
|
|
import { Colors } from '@/lib/colors';
|
|
|
|
interface RepubliqueHeaderProps {
|
|
/** Affiche le nom du service (CESIZen) à côté du bloc Marianne. */
|
|
showService?: boolean;
|
|
}
|
|
|
|
/**
|
|
* En-tête institutionnel reprenant l'identité visuelle de l'État (DSFR) :
|
|
* bloc « RÉPUBLIQUE / FRANÇAISE » accompagné du nom du service.
|
|
*/
|
|
export default function RepubliqueHeader({ showService = true }: RepubliqueHeaderProps) {
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.marianneBlock}>
|
|
<Text style={styles.republique}>RÉPUBLIQUE</Text>
|
|
<Text style={styles.francaise}>FRANÇAISE</Text>
|
|
<Text style={styles.devise}>Liberté{'\n'}Égalité{'\n'}Fraternité</Text>
|
|
</View>
|
|
{showService && (
|
|
<View style={styles.serviceBlock}>
|
|
<Text style={styles.serviceName}>CESIZen</Text>
|
|
<Text style={styles.serviceTagline}>Santé mentale</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 12,
|
|
backgroundColor: Colors.white,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: Colors.gray[200],
|
|
},
|
|
marianneBlock: {
|
|
paddingRight: 16,
|
|
borderRightWidth: 1,
|
|
borderRightColor: Colors.gray[200],
|
|
},
|
|
republique: { fontSize: 12, fontWeight: '700', color: Colors.black, letterSpacing: 0.5, lineHeight: 14 },
|
|
francaise: { fontSize: 12, fontWeight: '700', color: Colors.black, letterSpacing: 0.5, lineHeight: 14 },
|
|
devise: { fontSize: 8, color: Colors.gray[500], marginTop: 4, lineHeight: 10, fontStyle: 'italic' },
|
|
serviceBlock: { paddingLeft: 16 },
|
|
serviceName: { fontSize: 18, fontWeight: '800', color: Colors.primary },
|
|
serviceTagline: { fontSize: 11, color: Colors.gray[500], marginTop: 1 },
|
|
});
|