diff --git a/src/components/WebsiteComponent.js b/src/components/WebsiteComponent.js new file mode 100644 index 0000000..5d9b3fb --- /dev/null +++ b/src/components/WebsiteComponent.js @@ -0,0 +1,128 @@ +import React from "react"; +import { + View, + Text, + StyleSheet, + Image, + Pressable, + Linking, +} from "react-native"; + +export default function WebsiteComponent() { + const openLink = (url) => { + Linking.openURL(url); + }; + + return ( + + Websites + + openLink("https://eternityband.org/")} + > + + Eternity Band + + + + openLink("https://goaudacity.com/")} + > + + Audacity Workshop + + + + openLink("https://funyouth.us/")} + > + + ColorVision + + + + openLink("https://funyouth.us/art")} + > + + FUN Youth + + + + + ); +} + +const styles = StyleSheet.create({ + header: { + fontSize: 16, + fontWeight: "bold", + marginBottom: 10, + paddingHorizontal: 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: 20, + height: 20, + marginRight: 10, + }, + text: { + flex: 1, + fontSize: 14, + color: "#555", + }, + arrow: { + width: 20, + height: 20, + }, + divider: { + height: 1, + backgroundColor: "#e0e0e0", + }, +});