Merge pull request #14 from TritonSE/feature/pratyush1718/navbar

Feature/pratyush1718/navbar

dfm-sideline-sidekick-app/App.tsx

@@ -1,16 +1,70 @@
+import { NavigationContainer, useNavigation } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { StackNavigationProp } from "@react-navigation/stack";
 import { StatusBar } from "expo-status-bar";
-import { StyleSheet, Text, View } from "react-native";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from "react";
+import { StyleSheet } from "react-native";
+
+import { BottomNavBar, NavItem } from "./components/bar";
+import BookmarkPage from "./pages/BookmarkPage";
+import SearchPage from "./pages/SearchPage";
+import TabPage from "./pages/TabPage";
+
+type RootStackParamList = {
+  Bookmark: undefined;
+  Search: undefined;
+  Tab: undefined;
+};
+
+type StackNavigation = StackNavigationProp<RootStackParamList>;
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+const BottomNavBarComponent = () => {
+  const navigation = useNavigation<StackNavigation>();
+
+  const navigationItems: NavItem[] = [
+    {
+      id: 1,
+      icon: "bookmark",
+      onClick: () => {
+        navigation.navigate("Bookmark");
+      },
+    },
+    {
+      id: 2,
+      icon: "search",
+      onClick: () => {
+        navigation.navigate("Search");
+      },
+    },
+    {
+      id: 3,
+      icon: "principles",
+      onClick: () => {
+        navigation.navigate("Tab");
+      },
+    },
+  ];
+
+  return <BottomNavBar items={navigationItems} />;
+};
 
 export default function App() {
   return (
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName="Search">
+        <Stack.Screen name="Bookmark" component={BookmarkPage} options={{ headerShown: false }} />
+        <Stack.Screen name="Search" component={SearchPage} options={{ headerShown: false }} />
+        <Stack.Screen name="Tab" component={TabPage} options={{ headerShown: false }} />
+      </Stack.Navigator>
+      <BottomNavBarComponent />
       <StatusBar style="auto" />
-    </View>
+    </NavigationContainer>
   );
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const styles = StyleSheet.create({
   container: {
     flex: 1,

dfm-sideline-sidekick-app/components/bar.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import { TouchableOpacity, View } from "react-native";
+
+import { BookmarkIcon } from "../icons/bookmarkIcon";
+import { CircleIcon } from "../icons/circleIcon";
+import { GeneralPrinciplesIcon } from "../icons/generalPrinciplesIcon";
+
+import styles from "./barStyles";
+
+export type NavItem = {
+  id: number;
+  icon: string;
+  onClick: () => void;
+};
+
+export const BottomNavBar: React.FC<{ items: NavItem[] }> = ({ items }) => {
+  const [selectedItemId, setSelectedItemId] = useState<number | null>(2);
+
+  const handleItemClick = (itemId: number) => {
+    setSelectedItemId(itemId);
+    items.find((item) => item.id === itemId)?.onClick();
+  };
+
+  return (
+    <View style={styles.bottomBar}>
+      {items.map((item) => (
+        <TouchableOpacity
+          key={item.id}
+          onPress={() => {
+            handleItemClick(item.id);
+          }}
+        >
+          {item.icon === "search" ? (
+            <View style={{ top: -26.65 }}>
+              <CircleIcon fillColor={selectedItemId === item.id ? "#001F3F" : "#C0C8CB"} />
+            </View>
+          ) : item.icon === "bookmark" ? (
+            <BookmarkIcon fillColor={selectedItemId === item.id ? "#001F3F" : "#C0C8CB"} />
+          ) : (
+            <GeneralPrinciplesIcon fillColor={selectedItemId === item.id ? "#001F3F" : "#C0C8CB"} />
+          )}
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+};

dfm-sideline-sidekick-app/components/barStyles.tsx

@@ -0,0 +1,18 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  bottomBar: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    alignItems: "center",
+    backgroundColor: "#f0f0f0",
+    padding: 8,
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 79,
+  },
+});
+
+export default styles;

dfm-sideline-sidekick-app/icons/bookmarkIcon.tsx

@@ -0,0 +1,21 @@
+import PropTypes from "prop-types";
+import { View } from "react-native";
+import { Path, Svg } from "react-native-svg";
+
+export const BookmarkIcon = ({ fillColor }) => {
+  return (
+    <View>
+      <Svg width="21" height="27" viewBox="0 0 21 27" fill="none">
+        <Path
+          id="Vector"
+          d="M0 26.757V2.973C0 2.15543 0.291354 1.45578 0.874063 0.874063C1.45677 0.292346 2.15642 0.000991001 2.973 0H17.838C18.6556 0 19.3557 0.291355 19.9385 0.874063C20.5212 1.45677 20.812 2.15642 20.811 2.973V26.757L10.4055 22.2975L0 26.757ZM2.973 22.2232L10.4055 19.0272L17.838 22.2232V2.973H2.973V22.2232Z"
+          fill={fillColor as string}
+        />
+      </Svg>
+    </View>
+  );
+};
+
+BookmarkIcon.propTypes = {
+  fillColor: PropTypes.string.isRequired,
+};

dfm-sideline-sidekick-app/icons/circleIcon.tsx

@@ -0,0 +1,27 @@
+import PropTypes from "prop-types";
+import { View } from "react-native";
+import { Circle, G, Svg } from "react-native-svg";
+
+import { SearchIcon } from "../icons/searchIcon";
+
+export const CircleIcon = ({ fillColor }) => {
+  const circleRadius = 44.6533;
+  const circleCenterX = 45;
+  const circleCenterY = 45.4382;
+
+  return (
+    <View>
+      <Svg width={89.307} height={89.307} viewBox="0 0 90 91" fill="none">
+        <Circle cx={circleCenterX} cy={circleCenterY} r={circleRadius} fill={fillColor as string} />
+
+        <G transform={`translate(${circleCenterX - 20}, ${circleCenterY - 20})`}>
+          <SearchIcon />
+        </G>
+      </Svg>
+    </View>
+  );
+};
+
+CircleIcon.propTypes = {
+  fillColor: PropTypes.string.isRequired,
+};

dfm-sideline-sidekick-app/icons/generalPrinciplesIcon.tsx

@@ -0,0 +1,24 @@
+import PropTypes from "prop-types";
+import { View } from "react-native";
+import { G, Path, Svg } from "react-native-svg";
+
+export const GeneralPrinciplesIcon = ({ fillColor }) => {
+  return (
+    <View>
+      <Svg width="14" height="29" viewBox="0 0 14 29" fill="none">
+        <G id="Group 48098639">
+          <Path
+            id="Vector 404"
+            d="M0.878296 26.9385H12.9714M11.7586 3.93848V20.4137C11.7586 21.5182 10.8632 22.4137 9.75863 22.4137H4.02998C2.92541 22.4137 2.02998 21.5182 2.02998 20.4137V3.93848C2.02998 2.83391 2.92542 1.93848 4.02998 1.93848H9.75863C10.8632 1.93848 11.7586 2.83391 11.7586 3.93848Z"
+            stroke={fillColor as string}
+            strokeWidth="3"
+          />
+        </G>
+      </Svg>
+    </View>
+  );
+};
+
+GeneralPrinciplesIcon.propTypes = {
+  fillColor: PropTypes.string.isRequired,
+};

dfm-sideline-sidekick-app/icons/searchIcon.tsx

@@ -0,0 +1,17 @@
+import { View } from "react-native";
+import { Path, Svg } from "react-native-svg";
+
+export const SearchIcon = () => {
+  return (
+    <View>
+      <Svg width={40} height={40} viewBox="0 0 40 41" fill="none">
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M18.3333 7.1051C11.89 7.1051 6.66667 12.3284 6.66667 18.7718C6.66667 25.2151 11.89 30.4384 18.3333 30.4384C20.9539 30.4384 23.3727 29.5744 25.3203 28.1157L30.4882 33.2836C31.139 33.9345 32.1943 33.9345 32.8452 33.2836C33.4961 32.6327 33.4961 31.5775 32.8452 30.9266L27.6773 25.7587C29.136 23.8111 30 21.3923 30 18.7718C30 12.3284 24.7767 7.1051 18.3333 7.1051ZM10 18.7718C10 14.1694 13.731 10.4384 18.3333 10.4384C22.9357 10.4384 26.6667 14.1694 26.6667 18.7718C26.6667 23.3741 22.9357 27.1051 18.3333 27.1051C13.731 27.1051 10 23.3741 10 18.7718Z"
+          fill="white"
+        />
+      </Svg>
+    </View>
+  );
+};