Untitled
unknown
plain_text
a month ago
9.8 kB
4
Indexable
import React, { useState } from 'react'; import { View, Text, StyleSheet, TouchableOpacity, Modal, ScrollView, TextInput, FlatList } from 'react-native'; import { MaterialIcons } from '@expo/vector-icons'; const commonAllergies = [ 'Fıstık', 'Gluten', 'Süt', 'Yumurta', 'Soya', 'Kabuklu Deniz Ürünleri', 'Susam', 'Fındık', 'Ceviz', 'Keten Tohumu', 'Hardal', 'Çavdar', 'Sülfit', 'Kereviz', 'Badem', 'Kivi' ]; const AllergiesButton = () => { const [modalVisible, setModalVisible] = useState(false); const [userAllergies, setUserAllergies] = useState([]); const [searchQuery, setSearchQuery] = useState(''); const [customAllergy, setCustomAllergy] = useState(''); const toggleAllergy = (allergy) => { if (userAllergies.includes(allergy)) { setUserAllergies(userAllergies.filter(item => item !== allergy)); } else { setUserAllergies([...userAllergies, allergy]); } }; const addCustomAllergy = () => { if (customAllergy.trim() !== '' && !userAllergies.includes(customAllergy.trim())) { setUserAllergies([...userAllergies, customAllergy.trim()]); setCustomAllergy(''); } }; const removeAllergy = (allergy) => { setUserAllergies(userAllergies.filter(item => item !== allergy)); }; const filteredAllergies = commonAllergies.filter( allergy => allergy.toLowerCase().includes(searchQuery.toLowerCase()) ); return ( <View style={styles.container}> {/* Ana Profil Butonu */} <TouchableOpacity style={styles.allergyButton} onPress={() => setModalVisible(true)} > <MaterialIcons name="warning" size={24} color="#E74C3C" /> <Text style={styles.buttonText}>Alerjilerim</Text> <View style={styles.countContainer}> <Text style={styles.countText}>{userAllergies.length}</Text> </View> <MaterialIcons name="chevron-right" size={24} color="#888" /> </TouchableOpacity> {/* Alerjiler Modalı */} <Modal animationType="slide" transparent={true} visible={modalVisible} onRequestClose={() => setModalVisible(false)} > <View style={styles.modalContainer}> <View style={styles.modalContent}> <View style={styles.modalHeader}> <Text style={styles.modalTitle}>Alerjilerim</Text> <TouchableOpacity onPress={() => setModalVisible(false)}> <MaterialIcons name="close" size={24} color="#333" /> </TouchableOpacity> </View> {/* Kayıtlı Alerjiler */} {userAllergies.length > 0 ? ( <View style={styles.selectedAllergiesContainer}> <Text style={styles.sectionTitle}>Kayıtlı Alerjilerim</Text> <View style={styles.allergiesTags}> {userAllergies.map((allergy, index) => ( <View key={index} style={styles.allergyTag}> <Text style={styles.allergyTagText}>{allergy}</Text> <TouchableOpacity onPress={() => removeAllergy(allergy)}> <MaterialIcons name="close" size={16} color="white" /> </TouchableOpacity> </View> ))} </View> </View> ) : ( <View style={styles.emptyState}> <MaterialIcons name="info-outline" size={40} color="#ccc" /> <Text style={styles.emptyText}>Henüz alerji kaydetmediniz</Text> <Text style={styles.emptySubText}>Aşağıdan alerji ekleyebilirsiniz</Text> </View> )} {/* Arama Kutusu */} <TextInput style={styles.searchInput} placeholder="Alerji ara..." value={searchQuery} onChangeText={setSearchQuery} /> {/* Özel Alerji Ekleme */} <View style={styles.customAllergyContainer}> <TextInput style={styles.customAllergyInput} placeholder="Özel alerji ekle..." value={customAllergy} onChangeText={setCustomAllergy} /> <TouchableOpacity style={styles.addButton} onPress={addCustomAllergy} disabled={customAllergy.trim() === ''} > <Text style={styles.addButtonText}>Ekle</Text> </TouchableOpacity> </View> {/* Yaygın Alerjiler Listesi */} <Text style={styles.sectionTitle}>Yaygın Alerjiler</Text> <ScrollView style={styles.allergyList}> {filteredAllergies.map((allergy, index) => ( <TouchableOpacity key={index} style={[ styles.allergyItem, userAllergies.includes(allergy) && styles.selectedAllergyItem ]} onPress={() => toggleAllergy(allergy)} > <Text style={[ styles.allergyItemText, userAllergies.includes(allergy) && styles.selectedAllergyText ]} > {allergy} </Text> {userAllergies.includes(allergy) && ( <MaterialIcons name="check" size={20} color="#4A90E2" /> )} </TouchableOpacity> ))} </ScrollView> {/* Kaydet Butonu */} <TouchableOpacity style={styles.saveButton} onPress={() => { // Burada alerjileri kaydetme işleminizi gerçekleştirin // örn: saveAllergies(userAllergies); setModalVisible(false); }} > <Text style={styles.saveButtonText}>Kaydet</Text> </TouchableOpacity> </View> </View> </Modal> </View> ); }; const styles = StyleSheet.create({ container: { padding: 10, }, allergyButton: { flexDirection: 'row', alignItems: 'center', backgroundColor: 'white', borderRadius: 10, padding: 15, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.1, shadowRadius: 2, elevation: 2, }, buttonText: { fontSize: 16, fontWeight: '500', marginLeft: 12, flex: 1, }, countContainer: { backgroundColor: '#4A90E2', borderRadius: 15, width: 30, height: 30, justifyContent: 'center', alignItems: 'center', marginRight: 10, }, countText: { color: 'white', fontWeight: 'bold', fontSize: 14, }, modalContainer: { flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(0,0,0,0.5)', }, modalContent: { backgroundColor: 'white', borderTopLeftRadius: 20, borderTopRightRadius: 20, paddingHorizontal: 20, paddingBottom: 30, paddingTop: 15, height: '80%', }, modalHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 15, paddingBottom: 15, borderBottomWidth: 1, borderBottomColor: '#eee', }, modalTitle: { fontSize: 20, fontWeight: 'bold', }, searchInput: { backgroundColor: '#f5f5f5', borderRadius: 8, padding: 12, marginVertical: 10, }, allergyList: { maxHeight: 300, }, allergyItem: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 12, paddingHorizontal: 10, borderBottomWidth: 1, borderBottomColor: '#f0f0f0', }, selectedAllergyItem: { backgroundColor: '#f0f8ff', }, allergyItemText: { fontSize: 16, }, selectedAllergyText: { fontWeight: '500', color: '#4A90E2', }, saveButton: { backgroundColor: '#4A90E2', borderRadius: 10, padding: 15, alignItems: 'center', marginTop: 20, }, saveButtonText: { color: 'white', fontWeight: 'bold', fontSize: 16, }, selectedAllergiesContainer: { marginVertical: 10, }, sectionTitle: { fontSize: 16, fontWeight: 'bold', marginVertical: 5, }, allergiesTags: { flexDirection: 'row', flexWrap: 'wrap', marginTop: 5, }, allergyTag: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#4A90E2', paddingVertical: 6, paddingHorizontal: 12, borderRadius: 20, margin: 5, }, allergyTagText: { color: 'white', marginRight: 5, }, emptyState: { alignItems: 'center', justifyContent: 'center', padding: 20, marginVertical: 10, }, emptyText: { fontSize: 16, fontWeight: '500', marginTop: 10, color: '#555', }, emptySubText: { fontSize: 14, color: '#888', marginTop: 5, }, customAllergyContainer: { flexDirection: 'row', marginVertical: 10, }, customAllergyInput: { flex: 1, backgroundColor: '#f5f5f5', borderRadius: 8, padding: 12, marginRight: 10, }, addButton: { backgroundColor: '#50C878', borderRadius: 8, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 15, }, addButtonText: { color: 'white', fontWeight: 'bold', }, }); export default AllergiesButton;
Editor is loading...
Leave a Comment