load all color activities

frontend/src/component/colorActivity.js

@@ -2,12 +2,34 @@ import { useNavigation } from "@react-navigation/native";
 import React from "react";
 import {Text, TouchableOpacity, StyleSheet, View, Image} from 'react-native'
 
-export default function ColorActivity(){
+export default function ColorActivity(props){
+
+    const {title, image, id, color, des} = props;
 
     const navigation = useNavigation();
 
     return(
-        <TouchableOpacity onPress={()=> {navigation.navigate("Blue")}} style={styles.card}>
+        <TouchableOpacity onPress={()=> {navigation.navigate("Blue")}} 
+        style={{
+            borderWidth: 5, 
+            borderColor: color, 
+            marginVertical: 20,
+            backgroundColor: "#fff",
+            paddingVertical: 8,
+            paddingHorizontal: 15,
+            padding: 15,
+            width: 380,
+            marginHorizontal: 20,
+            borderRadius: 30,
+            shadowColor: "#000",
+            shadowOffset: {
+                width: 2,
+                height: 2
+            },
+            shadowOpacity: 0.3,
+            shadowRadius: 1.5,
+            }}>
+
             <View style={[{flexDirection: "row"}]}>
 
                 <View style={styles.cardImage}>
@@ -16,9 +38,21 @@ export default function ColorActivity(){
                 </View>
 
                 <View style={{flex: 0.6}}>
-                    <Text style={styles.cardTitle}>First Activity</Text>
-                    <Text style={styles.cardLocation}>Location</Text>
-                    <Text style={styles.cardDescription}>Description</Text>
+                    {/* <Text style={styles.cardDescription}>{id}</Text> */}
+                    <Text style={styles.cardTitle}>{title}</Text>
+                    <Text style={styles.cardLocation}>{des}</Text>
+                    <View 
+                    style={{
+                        marginLeft:10, 
+                        marginTop:5, 
+                        width: 40, 
+                        height: 40, 
+                        borderRadius: 100, 
+                        backgroundColor: color, 
+                        borderWidth: 1, 
+                        borderColor: "black",
+                        }}>
+                    </View>
                 </View>
                 
 

frontend/src/screen/Color.js

@@ -55,6 +55,11 @@ export default function Color(){
                         </ImageBackground>
                     </View>
                 </View>
+
+                {datas.map((data) =>{
+                    return(<ColorActivity title={data.name} image={data.image} id={data.idcolorActivities} des={data.des} color={data.color}/>)
+                })}
+
             </ScrollView>
         </SafeAreaView>
     )