Add volunteer and other opportunities components (#29)

Add volunteer and other opportunities components --------- Co-authored-by: Albert Young <117564829+CaptainCataIyst@users.noreply.github.com> Co-authored-by: TenType <55125103+TenType@users.noreply.github.com>
AudacityMusic · Jul 7, 2024 · 4f5f7e7 · 4f5f7e7
1 parent 8bff1c0
commit 4f5f7e7
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 82 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/OtherOpportunities.js b/src/components/OtherOpportunities.js
@@ -0,0 +1,78 @@
+import React from "react";
+import { View, Text, StyleSheet, Image, Pressable } from "react-native";
+
+export default function OtherOpportunities() {
+  return (
+    <View>
+      <Text style={styles.header}>Other Opportunities</Text>
+      <View style={styles.cardContainer}>
+        <Pressable style={[styles.card, styles.first]}>
+          <Image
+            style={styles.icon}
+            source={require("./../assets/music-note.png")}
+          />
+          <Text style={styles.text}>Request a Concert</Text>
+          <Image
+            style={styles.arrow}
+            source={require("./../assets/caret-left.png")}
+          />
+        </Pressable>
+        <View style={styles.divider} />
+        <Pressable style={[styles.card, styles.last]}>
+          <Image style={styles.icon} source={require("./../assets/gift.png")} />
+          <Text style={styles.text}>Make a Donation</Text>
+          <Image
+            style={styles.arrow}
+            source={require("./../assets/caret-left.png")}
+          />
+        </Pressable>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    fontSize: 16,
+    fontWeight: "bold",
+    marginBottom: 10,
+  },
+  cardContainer: {
+    backgroundColor: "#f5f5f5",
+    borderRadius: 10,
+  },
+  card: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 10,
+    borderColor: "#e0e0e0",
+    borderWidth: 1,
+  },
+  first: {
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
+  },
+  last: {
+    borderBottomLeftRadius: 10,
+    borderBottomRightRadius: 10,
+  },
+  icon: {
+    width: 15,
+    height: 15,
+    marginRight: 10,
+  },
+  text: {
+    flex: 1,
+    fontSize: 14,
+    color: "#555",
+  },
+  arrow: {
+    width: 20,
+    height: 20,
+    transform: [{ rotateZ: "180deg" }],
+  },
+  divider: {
+    height: 0.1,
+    backgroundColor: "#e0e0e0",
+  },
+});
diff --git a/src/components/VolunteerOpportunity.js b/src/components/VolunteerOpportunity.js
@@ -0,0 +1,82 @@
+import React from "react";
+import { View, Text, StyleSheet, Image, Pressable } from "react-native";
+
+export default function VolunteerOpportunity(props) {
+  return (
+    <View style={styles.background}>
+      <Image
+        style={styles.image}
+        source={require("./../assets/warm-springs-bart.png")}
+      />
+      <View>
+        <Pressable>
+          <Text style={styles.title}>Library Music Hour</Text>
+          <Text style={styles.info}>
+            <Image
+              style={styles.icon}
+              source={require("./../assets/clock.png")}
+            />
+            Saturday, August 10, 2024 2:30 PM
+          </Text>
+          <Text style={styles.info}>
+            <Image
+              style={styles.icon}
+              source={require("./../assets/location.png")}
+            />
+            Fremont Main Library
+          </Text>
+        </Pressable>
+      </View>
+      <Image
+        style={styles.caret}
+        source={require("./../assets/caret-left.png")}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  background: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#f5f5f5",
+    borderTopRightRadius: 10,
+    borderBottomRightRadius: 10,
+    borderBottomLeftRadius: 1005,
+    borderTopLeftRadius: 1000,
+
+    borderColor: "#e0e0e0",
+    borderWidth: 1,
+    margin: 10,
+  },
+  image: {
+    width: 80,
+    height: 80,
+    marginRight: 10,
+    borderTopRightRadius: 1,
+    borderBottomRightRadius: 1,
+    borderBottomLeftRadius: 10,
+    borderTopLeftRadius: 10,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "bold",
+    marginTop: -5,
+  },
+  info: {
+    fontSize: 10,
+    color: "#555",
+    marginTop: 1,
+  },
+  icon: {
+    width: 10,
+    height: 10,
+    marginRight: 5,
+  },
+  caret: {
+    width: 20,
+    height: 50,
+    marginLeft: 30,
+    transform: [{ rotateZ: "180deg" }],
+  },
+});
diff --git a/src/screens/HomeScreen.js b/src/screens/HomeScreen.js
@@ -1,7 +1,9 @@
 import { StyleSheet, Text, Image, View, Pressable } from "react-native";
-
+import VolunteerOpportunity from "../components/VolunteerOpportunity.js";
 export default function HomeScreen({ navigation }) {
   return (
+    <VolunteerOpportunity></VolunteerOpportunity>
+    /*
     <View style={styles.container}>
       <Image
         source={require("./../assets/audacity-music-club.png")}
@@ -28,6 +30,7 @@ export default function HomeScreen({ navigation }) {
         <Text style={styles.smallButton}>Visit our websites</Text>
       </Pressable>
     </View>
+    */
   );
 }