Views/avaliable events

.gitignore

@@ -12,5 +12,7 @@ web-build/
 yarn.lock
 yarn-error.log
 
+yarn.lock
+
 # macOS
 .DS_Store

app.json

@@ -1,6 +1,5 @@
 {
     "name": "Ballerini Meet",
-    "owner": "Clean Software",
     "version": "1.0.0",
     "backgroundColor": "#282828"
 }

components/eventCard/index.tsx

@@ -0,0 +1,58 @@
+import { Text, View, Image, TouchableHighlight } from "react-native";
+import styles from "./styles";
+import { useNavigation } from "@react-navigation/native";
+
+
+import { arrowOrangeSvg } from "./../../assets/CDN/svg";
+
+import { SvgUri } from 'react-native-svg';
+
+interface EventCardProps {
+  data: string,
+  hora: string,
+  title: string,
+  description: string,
+  author: string,
+  url: string,
+}
+const eventCard = (props : EventCardProps) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.top}>
+        <Text style={styles.data}>
+          {props.data}
+        </Text>
+        <Text style={styles.line}>
+          -
+        </Text>
+        <Text style={styles.hora}>
+          {props.hora}
+        </Text>
+      </View>
+      <Text style={styles.title}>
+        {props.title}
+      </Text>
+      <Text style={styles.description}>
+        {props.description}
+      </Text>
+      <View style={styles.organizadoPor}>
+        <View style={styles.organizadoPorLeft}>
+          <Text style={styles.organizadoPorText}>
+            Organizado por:
+          </Text>
+          <Text style={styles.organizadoPorNome}>
+            {props.author}
+          </Text>
+        </View>
+        <View>
+          <SvgUri 
+            style={styles.arrow}
+            uri={arrowOrangeSvg}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default eventCard;

components/eventCard/styles.ts

@@ -0,0 +1,71 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "#FFFFFF",
+    padding: 16,
+    borderRadius: 8,
+    marginVertical: 8,
+  },
+
+  top: {
+    display: "flex",
+    flexDirection: "row",
+  },
+  data: {
+    color: "#FF5100",
+    fontSize: 16,
+    fontWeight: "bold"
+  },
+  line: {
+    color: "#282828",
+    marginHorizontal: 4,
+    fontSize: 16,
+    fontWeight: "bold"
+  },
+  hora: {
+    color: "#FF5100",
+    fontSize: 16,
+    fontWeight: "600"
+  },
+  title: {
+    fontSize: 20,
+    marginTop: 8,
+    fontWeight: "700",
+  },
+  description: {
+    fontSize: 10,
+    color: "#959595",
+    marginTop: 8,
+  },
+  organizadoPor: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginTop: 8,
+  },
+  organizadoPorLeft: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-start",
+  },
+  organizadoPorText: {
+    fontSize: 8,
+    color: "#282828",
+    fontWeight: "600",
+  },
+  organizadoPorNome: {
+    marginLeft: 4,
+    fontSize: 8,
+    color: "#282828",
+    fontWeight: "bold",
+  },
+  arrow: {
+    width: 30,
+    height: 30,
+  }
+});
+
+export default styles;

components/navbar/index.tsx

@@ -34,6 +34,15 @@ const Navbar = () => {
           <Text>ChooseEvent</Text>
         </View>
       </TouchableHighlight>
+      <TouchableHighlight
+        onPress={() => {
+          navigation.navigate("AvaliableEvents" as any);
+        }}
+      >
+        <View>
+          <Text>avaliableEvents</Text>
+        </View>
+      </TouchableHighlight>
     </View>
   );
 };

navigation/index.tsx

@@ -1,7 +1,7 @@
 import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 
-import { ChooseEvent, EventPage, Home, LoadingPage } from "../views";
+import { ChooseEvent, EventPage, Home, LoadingPage, AvaliableEvents } from "../views";
 
 const Stack = createNativeStackNavigator();
 
@@ -17,6 +17,7 @@ function Routes() {
         <Stack.Screen name="LoadingPage" component={LoadingPage} />
         <Stack.Screen name="EventPage" component={EventPage} />
         <Stack.Screen name="ChooseEvent" component={ChooseEvent} />
+        <Stack.Screen name="AvaliableEvents" component={AvaliableEvents} />
       </Stack.Navigator>
     </NavigationContainer>
   );

views/avaliableEvents/index.tsx

@@ -0,0 +1,47 @@
+import { View, Text, TouchableHighlight, Image } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import EventCard from "../../components/eventCard";
+import { useNavigation } from "@react-navigation/native";
+import styles from "./styles";
+
+export default function EventPage() {
+  const navigation = useNavigation();
+
+  return (
+    <SafeAreaView style={styles.globalView}>
+      <View style={styles.topbar}>
+        <View>
+          <Text style={styles.title}>
+              Eventos{'\n'}
+              disponíveis
+          </Text>
+          <Text style={styles.subtitle}>
+            Selecione o evento desejado.{'\n'}
+            E espere sua data!
+          </Text>
+        </View>
+
+        <TouchableHighlight  underlayColor='transparent' onPress={() => {
+          navigation.goBack();
+        }}>
+          <View style={styles.botaoVoltar}>
+            <Image style={styles.iconBotao} source={{
+              uri: 'https://res.cloudinary.com/dcy5jian9/image/upload/v1646193820/Arrow-White_vapvlb.png'
+            }} />
+            <Text style={styles.textoBotao}>
+              Voltar
+            </Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+      <View style={styles.eventCards}>
+        <EventCard key={"1"} data="02/MAR" hora="19:00" title="Criando interfaces muito malucas com o Figma!" description="Você pode criar interfaces malucas que dispertam sua criativade. Usando de recursos do próprio figma, como seus plugins." author="Comunidade Ballerini" url="#" />
+
+        <EventCard key={"2"} data="01/MAR" hora="10:00" title="Entendendo o Z-Pattern" description="Conheça como o olho humano observa um website a partir dos conceitos hierarquicos do Z-Pattern." author="Comunidade Ballerini" url="#" />
+      </View>
+      <Text style={styles.semMaisEventos}>
+        Sem mais eventos...
+      </Text>
+    </SafeAreaView>
+  );
+}

views/avaliableEvents/styles.ts

@@ -0,0 +1,57 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  globalView: {
+    padding: 30,
+    backgroundColor: '#282828',
+    minHeight: '100%',
+  },
+  topbar: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: "bold",
+    color: "#fff",
+  },
+  subtitle: {
+    fontSize: 18,	
+    marginTop: 8,
+    color: "#C6C6C6",
+    lineHeight: 24
+  },
+  iconBotao: {
+    width: 25,
+    height: 25,
+    transform: [
+      {
+        rotate: "180deg"
+      }
+    ],
+  },
+  botaoVoltar: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    alignItems: "center",
+  },
+  textoBotao: {
+    fontWeight: "600",
+    fontSize: 16,
+    color: "#C6C6C6",
+  },
+  eventCards: {
+    marginTop: 30,
+  },
+  semMaisEventos: {
+    color: "#FFFFFF",
+    fontSize: 12,
+    opacity: 0.5,
+    textAlign: "center",
+    marginTop: 30,
+  }
+});
+
+export default styles;

views/index.ts

@@ -2,3 +2,4 @@ export { default as LoadingPage } from "./loadingPage";
 export { default as Home } from "./home";
 export { default as EventPage } from "./eventPage";
 export { default as ChooseEvent } from "./chooseEvent";
+export { default as AvaliableEvents } from "./avaliableEvents";