class métier + selectChanter toujours en cours

components/selectChantier.tsx

@@ -4,12 +4,17 @@ import { ThemedTextInput } from './themed-textinpute';
 import { ThemedView } from "./themed-view";
 import { ThemedText } from './themed-text';
 import { ThemedButton } from './themed-button';
+import { Chantier, Chef, exempleChantier } from '@/class/class';
+import {BlurView} from 'expo-blur';
+import { Dimensions } from "react-native";
+
+const screenHeight = Dimensions.get("window").height;
 
 export default function SelectChantier() {
 
     const [search, setSearch] = useState('');
     const [isOpen,setIsOpen] = useState(false);
-    const [chantiers,setChantiers] = useState([]);
+    const [chantiers,setChantiers] = useState<Chantier[]>([exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier]);
     
 
   function onPressOpen(event: GestureResponderEvent): void {
@@ -17,45 +22,62 @@ export default function SelectChantier() {
   }
 
 
-    const renderChantier = ()  => {
+    const renderChantier = (chantier:Chantier, index: number)  => {
       return(
-      <ThemedView lvl={0} style={styles.chantier}>
+      <ThemedView key={index} lvl={3} style={styles.chantier}>
+        <ThemedText>adresse: {chantier.adresse}</ThemedText>
+        <ThemedText>chef de chantier: {chantier.chef.prenom} {chantier.chef.nom}</ThemedText>
+        <ThemedText>date de début: {chantier.dateDep}</ThemedText>
+        <ThemedText>etat: {chantier.etat}</ThemedText>
       </ThemedView>
       );
     };
 
-    if(isOpen){
+    if(!isOpen){
     return (
         <View style={styles.closedSelectZone}>
-              <ThemedButton  style={styles.button} lvl={2} onPress={onPressOpen}>
-              <ThemedText style={styles.buttonText}>Open</ThemedText>
-              </ThemedButton>
+          <ThemedButton  style={styles.button} lvl={2} onPress={onPressOpen}>
+            <ThemedText style={styles.buttonText}>Open</ThemedText>
+          </ThemedButton>
         </View>
     )
     }
     else{
       return(
-        <ThemedView lvl={2} style={styles.openedSelectZone}>
-          <ScrollView>
-            <ThemedButton  style={styles.buttonOpen} lvl={3} onPress={onPressOpen}>
-              <ThemedText style={styles.buttonText}>Close</ThemedText>
-            </ThemedButton>
-              <View style={styles.searchZone}>
-                <ThemedTextInput
-                  lvl={1}
-                  border={5}
-                  style={styles.input}
-                  placeholder='Rechercher un chantier'
-                  value={search}
-                  onChangeText={setSearch}
-                />
-              </View>
+        <View style={styles.openedSelectZone}>
+          <BlurView intensity={1} blurReductionFactor={0.2} experimentalBlurMethod='dimezisBlurView' style={styles.blur}>
+            <ThemedView lvl={0} opacity="40">
               
-              <View>
+                <ThemedButton  style={styles.buttonOpen} lvl={3} onPress={onPressOpen}>
+                  <ThemedText style={styles.buttonText}>Close</ThemedText>
+                </ThemedButton>
+
+                <View style={styles.searchZone}>
+                  <ThemedTextInput
+                    lvl={1}
+                    border={4}
+                    style={styles.input}
+                    placeholder='Rechercher un chantier'
+                    value={search}
+                    onChangeText={setSearch}
+                  />
+                </View>
+                
+                
+                  <ScrollView>
+                    {chantiers.map((chantier, index) => (
+                      renderChantier(chantier, index)
+                      ))
+                    }
+                  </ScrollView>
+                  
+
+            </ThemedView>
+            
+        </BlurView>
+      </View>
+
 
-              </View>
-          </ScrollView>
-      </ThemedView>
       )
     };
 }
@@ -67,6 +89,13 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     zIndex: 9999,
     elevation: 9999,
+    overflow: "hidden",
+    paddingTop:25,
+    height: screenHeight/2,
+  },
+  blur:{
+    /*flex: 1,*/
+    /*backgroundColor: "rgba(255,255,255,0.0001)",*/
   },
   closedSelectZone:{
     position: 'absolute',
@@ -90,11 +119,15 @@ const styles = StyleSheet.create({
   },
     searchZone:{
     width: "100%",
-    padding:20,
-    marginTop:50,
+    padding:10,
+    marginTop:10,
     alignItems: 'center',
   },
   chantier:{
+    padding:10,
+    margin:10,
+    borderRadius:10,
+    //borderWidth: 1,
   },
   input: {
     width: '100%',