From 2fbae5215e6c3b469424134c4f752d1641c07d97 Mon Sep 17 00:00:00 2001
From: Samuel Oberhofer <sa.oberhofer@mci4me.at>
Date: Mon, 12 Dec 2022 20:38:15 +0100
Subject: [PATCH] Add EventCard and EventOverviewScreen

---
 components/EventCard.js        | 37 ++++++++++++++++++++++++++++++++++
 screens/EventOverviewScreen.js | 33 ++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 components/EventCard.js
 create mode 100644 screens/EventOverviewScreen.js

diff --git a/components/EventCard.js b/components/EventCard.js
new file mode 100644
index 0000000..b342f49
--- /dev/null
+++ b/components/EventCard.js
@@ -0,0 +1,37 @@
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import Colors from "../constants/colors";
+
+const EventCard = (props) => {
+  return (
+    <TouchableOpacity style={{ ...styles.screen, ...props.style }}>
+      <View style={styles.eventItem}>
+        <Text style={styles.text}>
+          {props.event._name} ({props.event._date})
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    alignItem: "center",
+    justifyContent: "center",
+    backgroundColor: Colors.primary500,
+  },
+  eventItem: {
+    margin: 10,
+    padding: 10,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: "white",
+    height: 60,
+    backgroundColor: Colors.primary400,
+  },
+  text: {
+    color: "white",
+  },
+});
+
+export default EventCard;
diff --git a/screens/EventOverviewScreen.js b/screens/EventOverviewScreen.js
new file mode 100644
index 0000000..d96554c
--- /dev/null
+++ b/screens/EventOverviewScreen.js
@@ -0,0 +1,33 @@
+import { ScrollView, StyleSheet, View } from "react-native";
+import { StatusBar } from "expo-status-bar";
+
+import { EVENTS } from "../data/EventData";
+
+import Colors from "../constants/colors";
+import EventCard from "../components/EventCard";
+import FloatingButton from "../components/FloatingButton";
+
+const eventsToDisplay = EVENTS.map((event, index) => {
+  return <EventCard event={event} key={index} />;
+});
+
+const EventOverviewScreen = (props) => {
+  return (
+    <View style={styles.container}>
+      <ScrollView>{eventsToDisplay}</ScrollView>
+      <FloatingButton />
+      <StatusBar style="auto" />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.primary500,
+    alignItem: "center",
+    justifyContent: "center",
+  },
+});
+
+export default EventOverviewScreen;