hack-rpi · singhriya0 · Feb 6, 2024 · Mar 12, 2024 · Mar 15, 2024 · Apr 3, 2024
diff --git a/HackRPIEventApp2023/App.js b/HackRPIEventApp2023/App.js
@@ -1,24 +1,55 @@
 import React from "react";
-import { StyleSheet, View, Text } from "react-native";
+import { StyleSheet, View, Text, Dimensions } from "react-native";
 import { NavigationContainer } from "@react-navigation/native";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { Feather } from "@expo/vector-icons";
 import { StatusBar } from "expo-status-bar";
 import Calander from "./Box/Calander";
-import Food from "./information/Food";
-// import { colors } from './colors';
 import { globalStyles } from "./styles";
+import InfoButtonWrapper from "./Components/InfoButtonWrapper";
+import { faQuestion, faDollarSign, faBook, faMap, faUtensils } from "@fortawesome/free-solid-svg-icons";
 
 const Tab = createBottomTabNavigator();
 
+const { width, height } = Dimensions.get('window');
+
 function InfoScreen() {
+  return (
+    <View style={styles.info}>
+      <View flex={20} style={styles.titleBlock}>
+        <Text style={styles.title}>Info</Text>
+      </View>
+      <View flex={5} flexDirection={"row"}>
+        <View flex={1} style={styles.borderline}></View>
+        <View flex={4}></View>
+      </View>
+      <View flexDirection="row" flex={75}>
+        <View style={styles.buttonGrid} flex={1}>
+
+            <InfoButtonWrapper circleColor="#EF3B41" text="Food" icon={faUtensils} onPress={() => expandSection()} />
+            <InfoButtonWrapper circleColor="#F8A13A" text="Maps" icon={faMap} onPress={() => expandSection()} />
+            <InfoButtonWrapper circleColor="#05A55C" text="FAQ" icon={faQuestion} onPress={() => expandSection()} />
+            <InfoButtonWrapper circleColor="#0158A9" text="Sponsors" icon={faDollarSign} onPress={() => expandSection()} />
+            <InfoButtonWrapper circleColor="#B43D96" text="Hacker Handbook" icon={faBook} onPress={() => expandSection()} />
+        </View>
+
+      </View>
+    </View>
+  );
+}
+
+function FoodPage() {
   return (
     <View style={styles.container}>
-      <Food />
+      <Text style={styles.text}>Food Page</Text>
     </View>
   );
 }
 
+function expandSection() {
+  console.log("cool beans");
+}
+
 function HomeScreen() {
   return (
     <View style={styles.container}>
@@ -44,7 +75,6 @@ export default function App() {
       <Tab.Navigator
         screenOptions={({ route }) => ({
           tabBarIcon: ({ focused, color, size }) => {
-            //adding icons
             let iconName;
             if (route.name === "Info") {
               iconName = "info";
@@ -65,15 +95,17 @@ export default function App() {
             fontSize: 12,
           },
           tabBarStyle: {
-            backgroundColor: globalStyles.primary, // should this be transparent?
-            borderTopWidth: 0, // Hide top border of the tab bar
+            backgroundColor: globalStyles.primary,
+            borderTopWidth: 0,
           },
           tabBarActiveTintColor: globalStyles.accent,
           tabBarInactiveTintColor: "white",
-        })}>
+        })}
+      >
         <Tab.Screen name="Info" component={InfoScreen} />
         <Tab.Screen name="Home" component={HomeScreen} />
         <Tab.Screen name="Queue" component={QueueScreen} />
+        <Tab.Screen name="FoodPage" component={FoodPage} />
       </Tab.Navigator>
     </NavigationContainer>
   );
@@ -91,4 +123,75 @@ const styles = StyleSheet.create({
     fontWeight: globalStyles.fontWeight,
     color: globalStyles.text,
   },
+  info: {
+    width: "100%",
+    height: "100%",
+    backgroundColor: "#1E1E1E",
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "column",
+  },
+  buttonGrid: {
+    flexDirection: "column",
+    justifyContent: "flex-start",
+    alignItems: "flex-start",
+    gap: 0,
+  },
+  buttonRow: {
+    flex: 1,
+    flexDirection: "row",
+    gap: height*0.05,
+    justifyContent: "center",
+  },
+  titleBlock: {
+    width: "100%",
+  },
+  title: {
+    fontSize: width*.15,
+    fontWeight: "bold",
+    color: "#FFFFFF",
+    marginTop: height*.05,
+    marginLeft: width*0.1,
+  },
+  subtitle: {
+    fontSize: 30,
+    fontWeight: "bold",
+    color: "#FFFFFF",
+    marginLeft: 50,
+  },
+  row: {
+    flexDirection: "row",
+  },
+  line: {
+    backgroundColor: "#74B7EF",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "120%",
+
+},
+stop: {
+    width: width * 0.07,
+    height: width * 0.07,
+    borderRadius: width * 0.07,
+    backgroundColor: "#74B7EF",
+    alignItems: "center",
+    justifyContent: "center",
+},
+inner: {
+    width: width * 0.04,
+    height: width * 0.04,
+    borderRadius: width * 0.04,
+    backgroundColor: "#25303C",
+},
+bordertest: {
+    borderColor: "#fcfdfb",
+    borderWidth: 2,
+},
+borderline: {
+  borderTopWidth: width*0.025,
+  borderColor: "#74B7EF",
+  transform: [{rotate: '45deg'},{translateY: width*0.052},{translateX: -width*0.053}],
+}
 });
+
+
diff --git a/HackRPIEventApp2023/Components/InfoButton.js b/HackRPIEventApp2023/Components/InfoButton.js
@@ -0,0 +1,53 @@
+import React from "react";
+import { StyleSheet, View, Pressable, Text, Image } from 'react-native';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+import { Dimensions } from 'react-native'
+
+const { width, height } = Dimensions.get('window');
+
+
+export default function InfoButton ({circleColor, text, icon, func}) {
+    return (
+      <View style={styles.buttonContainer}>
+        <Pressable style={styles.buttonContents} onPress={func}>
+          <View style={styles.iconContainer} backgroundColor={circleColor} >
+            <FontAwesomeIcon icon={icon} style={styles.textStyle} size={25} />
+          </View>
+          <Text style={styles.textStyle} adjustsFontSizeToFit={true} flex={1}>{text}</Text>
+        </Pressable>
+      </View>
+    );
+}
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    borderRadius: width * 0.03,
+    width: width * 0.75,
+    height: height * 0.075,
+    backgroundColor: "#1E262D",
+  },
+  buttonContents: {
+    margin: width * 0.01,
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+
+  },
+  textStyle: {
+    fontFamily: "sans-serif",
+    color: '#fff',
+    fontSize: width * 0.1,
+  },
+
+  iconContainer: {
+    width: width * 0.12,
+    height: width * 0.12,
+    borderRadius: width * 0.12,
+    alignItems: "center",
+    justifyContent: "center",
+    margin: width * 0.02,
+    marginRight: width * 0.05,
+  }
+});
+
+//change font later
diff --git a/HackRPIEventApp2023/Components/InfoButtonFinal.js b/HackRPIEventApp2023/Components/InfoButtonFinal.js
@@ -0,0 +1,47 @@
+import React from "react";
+import { StyleSheet, View, Pressable, Text, Image } from 'react-native';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+
+// can also set a line maximum for text if necessary
+
+export default function InfoButton ({circleColor, text, icon, func}) {
+    return (
+      <View style={styles.buttonContainer}>
+        <Pressable style={styles.buttonContents} onPress={func}>
+          <View style={styles.iconContainer} backgroundColor={circleColor}>
+            <FontAwesomeIcon icon={icon} style={styles.textStyle} size={40} />
+          </View>
+          <Text style={styles.textStyle} adjustsFontSizeToFit={true} flex={1}>{text}</Text>
+        </Pressable>
+      </View>
+    );
+}
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    borderRadius: 15,
+    width: 130,
+    height: 130,
+    backgroundColor: "#1E262D",
+  },
+  buttonContents: {
+    margin: 5,// change later?
+    flex: 1,
+    flexDirection: "column",
+    alignItems: "center",
+
+  },
+  textStyle: {
+    color: '#fff',
+    fontSize: 35,
+  },
+  iconContainer: {
+    width: 70,
+    height: 70,
+    borderRadius: 35,
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 3,
+    marginBottom: 2,
+  }
+});
diff --git a/HackRPIEventApp2023/Components/InfoButtonWrapper.js b/HackRPIEventApp2023/Components/InfoButtonWrapper.js
@@ -0,0 +1,55 @@
+import React from "react";
+import { StyleSheet, View, Pressable, Text, Image } from 'react-native';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+import { Dimensions } from 'react-native'
+import InfoButton from "./InfoButton";
+
+const { width, height } = Dimensions.get('window');
+
+export default function InfoButtonWrapper({circleColor, text, icon, func}) {
+    return (
+        <View style={styles.wrapper}>
+            <View flex={0.9} style={styles.row}>
+                <View flex={2}></View>
+                <View flex={0.5} style={styles.line}>
+                    <View style={styles.stop}>
+                        <View style={styles.inner}></View>
+                    </View>
+                </View>
+                <View flex={2}></View>
+            </View>
+            <View marginTop={height*0.01} marginBottom={height*0.01}>
+                <InfoButton circleColor={circleColor} text={text} icon = {icon} func = {func}/>
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    wrapper: {
+        flexDirection: "row",
+
+    },
+    row: {
+        flexDirection: "row",
+    },
+    line: {
+        backgroundColor: "#74B7EF",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    stop: {
+        width: width * 0.07,
+        height: width * 0.07,
+        borderRadius: width * 0.07,
+        backgroundColor: "#74B7EF",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    inner: {
+        width: width * 0.04,
+        height: width * 0.04,
+        borderRadius: width * 0.04,
+        backgroundColor: "#25303C",
+    },
+})
diff --git a/HackRPIEventApp2023/Components/PDFViewer.jsx b/HackRPIEventApp2023/Components/PDFViewer.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { StyleSheet, Dimensions, View } from 'react-native';
+import Pdf from 'react-native-pdf';
+
+export default class PDFExample extends React.Component {
+    render() {
+        const source = { uri: 'http://samples.leanpub.com/thereactnativebook-sample.pdf', cache: true };
+        //const source = require('./test.pdf');  // ios only
+        //const source = {uri:'bundle-assets://test.pdf' };
+        //const source = {uri:'file:///sdcard/test.pdf'};
+        //const source = {uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."};
+        //const source = {uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"};
+        //const source = {uri:"blob:xxxxxxxx-...?offset=0&size=xxx"};
+
+        return (
+            <View style={styles.container}>
+                <Pdf
+                    source={source}
+                    onLoadComplete={(numberOfPages,filePath) => {
+                        console.log(`Number of pages: ${numberOfPages}`);
+                    }}
+                    onPageChanged={(page,numberOfPages) => {
+                        console.log(`Current page: ${page}`);
+                    }}
+                    onError={(error) => {
+                        console.log(error);
+                    }}
+                    onPressLink={(uri) => {
+                        console.log(`Link pressed: ${uri}`);
+                    }}
+                    style={styles.pdf}/>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        marginTop: 25,
+    },
+    pdf: {
+        flex:1,
+        width:Dimensions.get('window').width,
+        height:Dimensions.get('window').height,
+    }
+});