cec967f953
- Surse complete web (React/Vite) + mobil (React Native/Expo) + extensie (MV3) - Documentație de livrare: ghid utilizare, matrice trasabilitate cerințe, raport testare furnizor - Artefacte binare: imagine Docker didi-frontend:lot3-1.0, APK, extensie v3.2.6 + SHA256SUMS - Configurare adresă platformă externalizată (build args / .env / config.js) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';
|
|
import { ChevronDown } from 'lucide-react-native';
|
|
import { COLORS, SPACING, RADIUS, FONT_WEIGHTS } from '../../theme/colors';
|
|
|
|
interface Props {
|
|
onPress: () => void;
|
|
expanded: boolean;
|
|
label: string;
|
|
/** Optional leading icon node (defaults to none). */
|
|
leading?: React.ReactNode;
|
|
}
|
|
|
|
export default function CollapseButton({ onPress, expanded, label, leading }: Props) {
|
|
return (
|
|
<TouchableOpacity onPress={onPress} activeOpacity={0.7} style={styles.btn}>
|
|
<View style={styles.left}>
|
|
{leading}
|
|
<Text style={styles.label}>{label}</Text>
|
|
</View>
|
|
<View style={[styles.chevron, expanded && styles.chevronExpanded]}>
|
|
<ChevronDown size={14} color="rgba(255,255,255,0.6)" strokeWidth={2.5} />
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
btn: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingVertical: 12,
|
|
paddingHorizontal: 18,
|
|
backgroundColor: 'rgba(255,255,255,0.022)',
|
|
borderRadius: RADIUS.xl,
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(255,255,255,0.05)',
|
|
marginBottom: SPACING.sm,
|
|
},
|
|
left: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 12,
|
|
flex: 1,
|
|
},
|
|
label: {
|
|
fontSize: 13,
|
|
fontWeight: FONT_WEIGHTS.medium,
|
|
color: 'rgba(255,255,255,0.75)',
|
|
letterSpacing: -0.05,
|
|
},
|
|
chevron: {
|
|
transform: [{ rotate: '0deg' }],
|
|
},
|
|
chevronExpanded: {
|
|
transform: [{ rotate: '180deg' }],
|
|
},
|
|
});
|