From 4f5f7e7bdbfd862c02a9620f4266b42a0d5e6a34 Mon Sep 17 00:00:00 2001 From: Albert Young <117564829+CaptainCataclyst@users.noreply.github.com> Date: Sun, 7 Jul 2024 00:27:14 -0700 Subject: [PATCH] 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> --- package-lock.json | 83 +------------------------- src/components/OtherOpportunities.js | 78 ++++++++++++++++++++++++ src/components/VolunteerOpportunity.js | 82 +++++++++++++++++++++++++ src/screens/HomeScreen.js | 5 +- 4 files changed, 166 insertions(+), 82 deletions(-) create mode 100644 src/components/OtherOpportunities.js create mode 100644 src/components/VolunteerOpportunity.js diff --git a/package-lock.json b/package-lock.json index 6252bfd..aef7b0b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,11 +19,7 @@ "react": "^18.2.0", "react-dom": "18.2.0", "react-native": "0.74.2", - "react-native-linear-gradient": "^2.8.3", - "react-native-safe-area-context": "4.10.1", - "react-native-screens": "3.31.1", - "react-native-web": "~0.19.10", - "react-navigation": "^5.0.0" + "react-native-screens": "3.31.1" }, "devDependencies": { "@babel/core": "^7.20.0", @@ -7031,14 +7027,6 @@ "node": ">=8" } }, - "node_modules/css-in-js-utils": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz", - "integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==", - "dependencies": { - "hyphenate-style-name": "^1.0.3" - } - }, "node_modules/dag-map": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/dag-map/-/dag-map-1.0.2.tgz", @@ -8141,11 +8129,6 @@ "node": ">=8.6.0" } }, - "node_modules/fast-loops": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.3.tgz", - "integrity": "sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g==" - }, "node_modules/fast-xml-parser": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.4.0.tgz", @@ -8809,11 +8792,6 @@ "node": ">=10.17.0" } }, - "node_modules/hyphenate-style-name": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz", - "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==" - }, "node_modules/ieee754": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", @@ -8911,15 +8889,6 @@ "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==" }, - "node_modules/inline-style-prefixer": { - "version": "6.0.4", - "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.4.tgz", - "integrity": "sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg==", - "dependencies": { - "css-in-js-utils": "^3.1.0", - "fast-loops": "^1.1.3" - } - }, "node_modules/internal-ip": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz", @@ -12162,11 +12131,6 @@ "node": "^10 || ^12 || >=14" } }, - "node_modules/postcss-value-parser": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" - }, "node_modules/prettier": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz", @@ -12512,19 +12476,11 @@ } } }, - "node_modules/react-native-linear-gradient": { - "version": "2.8.3", - "resolved": "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.8.3.tgz", - "integrity": "sha512-KflAXZcEg54PXkLyflaSZQ3PJp4uC4whM7nT/Uot9m0e/qxFV3p6uor1983D1YOBJbJN7rrWdqIjq0T42jOJyA==", - "peerDependencies": { - "react": "*", - "react-native": "*" - } - }, "node_modules/react-native-safe-area-context": { "version": "4.10.1", "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.10.1.tgz", "integrity": "sha512-w8tCuowDorUkPoWPXmhqosovBr33YsukkwYCDERZFHAxIkx6qBadYxfeoaJ91nCQKjkNzGrK5qhoNOeSIcYSpA==", + "peer": true, "peerDependencies": { "react": "*", "react-native": "*" @@ -12543,30 +12499,6 @@ "react-native": "*" } }, - "node_modules/react-native-web": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.12.tgz", - "integrity": "sha512-o2T0oztoVDQjztt4YksO9S1XRjoH/AqcSvifgWLrPJgGVbMWsfhILgl6lfUdEamVZzZSVV/2gqDVMAk/qq7mZw==", - "dependencies": { - "@babel/runtime": "^7.18.6", - "@react-native/normalize-colors": "^0.74.1", - "fbjs": "^3.0.4", - "inline-style-prefixer": "^6.0.1", - "memoize-one": "^6.0.0", - "nullthrows": "^1.1.1", - "postcss-value-parser": "^4.2.0", - "styleq": "^0.1.3" - }, - "peerDependencies": { - "react": "^18.0.0", - "react-dom": "^18.0.0" - } - }, - "node_modules/react-native-web/node_modules/memoize-one": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz", - "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==" - }, "node_modules/react-native/node_modules/@react-native-community/cli": { "version": "13.6.8", "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-13.6.8.tgz", @@ -12936,12 +12868,6 @@ "node": ">=12" } }, - "node_modules/react-navigation": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/react-navigation/-/react-navigation-5.0.0.tgz", - "integrity": "sha512-ACTzjc4L1ik7rJ092ZhIELBJ/pnoLgRIqWHSKcYcaBASxyjJCgBEDIV5s585HBj55tw25YwNdlj3+d4B4MYWDg==", - "deprecated": "This package is no longer supported. Please use @react-navigation/native instead. See https://reactnavigation.org/docs/getting-started/ for usage guide" - }, "node_modules/react-refresh": { "version": "0.14.2", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz", @@ -13894,11 +13820,6 @@ "resolved": "https://registry.npmjs.org/structured-headers/-/structured-headers-0.4.1.tgz", "integrity": "sha512-0MP/Cxx5SzeeZ10p/bZI0S6MpgD+yxAhi1BOQ34jgnMXsCq3j1t6tQnZu+KdlL7dvJTLT3g9xN8tl10TqgFMcg==" }, - "node_modules/styleq": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/styleq/-/styleq-0.1.3.tgz", - "integrity": "sha512-3ZUifmCDCQanjeej1f6kyl/BeP/Vae5EYkQ9iJfUm/QwZvlgnZzyflqAsAWYURdtea8Vkvswu2GrC57h3qffcA==" - }, "node_modules/sucrase": { "version": "3.34.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz", diff --git a/src/components/OtherOpportunities.js b/src/components/OtherOpportunities.js new file mode 100644 index 0000000..b622daa --- /dev/null +++ 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 ( + + Other Opportunities + + + + Request a Concert + + + + + + Make a Donation + + + + + ); +} + +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 new file mode 100644 index 0000000..4e21945 --- /dev/null +++ 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 ( + + + + + Library Music Hour + + + Saturday, August 10, 2024 2:30 PM + + + + Fremont Main Library + + + + + + ); +} + +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 index 1f5b117..29eeed6 100644 --- 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 ( + + /* Visit our websites + */ ); }