Merge pull request #9 from TritonSE/shared-components

complete navbar

Author: philip-chen6

frontend/assets/icons/home-filled.svg

@@ -0,0 +1,42 @@
+import { Platform, StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between", // Matches Figma "Auto" spacing
+    alignItems: "center",
+    backgroundColor: "#FFFFFF",
+
+    borderTopWidth: 1,
+    borderTopColor: "#E5E5E5",
+
+    paddingHorizontal: 40,
+    paddingTop: 10,
+    paddingBottom: Platform.OS === "ios" ? 30 : 16,
+
+    // Shadow for depth
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: -2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  tab: {
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: 50,
+  },
+  iconContainer: {
+    marginBottom: 6,
+    height: 24,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  label: {
+    fontFamily: "Instrument Sans",
+    fontSize: 11,
+    fontWeight: "600",
+    letterSpacing: 0.2,
+    lineHeight: 12,
+  },
+});

frontend/assets/icons/home.svg

@@ -0,0 +1,76 @@
+import React from "react";
+import { Text, TouchableOpacity, View } from "react-native";
+
+// SVG Imports
+import HomeFilledIcon from "../../assets/icons/home-filled.svg";
+import HomeIcon from "../../assets/icons/home.svg";
+import LibraryFilledIcon from "../../assets/icons/library-filled.svg";
+import LibraryIcon from "../../assets/icons/library.svg";
+import SearchFilledIcon from "../../assets/icons/search-filled.svg";
+import SearchIcon from "../../assets/icons/search.svg";
+
+import { styles } from "./Navbar.styles";
+
+export type TabName = "Home" | "Search" | "Library";
+
+type NavbarProps = {
+  currentTab: TabName;
+  onSwitchTab: (tab: TabName) => void;
+};
+
+type TabButtonProps = {
+  tab: TabName;
+  isActive: boolean;
+  onPress: () => void;
+};
+
+const ACTIVE_TEXT_COLOR = "#153A7A";
+const INACTIVE_TEXT_COLOR = "#909090";
+
+const getTabIcon = (tab: TabName, isActive: boolean) => {
+  switch (tab) {
+    case "Home":
+      return isActive ? <HomeFilledIcon /> : <HomeIcon />;
+    case "Search":
+      return isActive ? <SearchFilledIcon /> : <SearchIcon />;
+    case "Library":
+      return isActive ? <LibraryFilledIcon /> : <LibraryIcon />;
+    default:
+      return null;
+  }
+};
+
+const TabButton: React.FC<TabButtonProps> = ({ tab, isActive, onPress }) => {
+  return (
+    <TouchableOpacity
+      style={styles.tab}
+      onPress={onPress}
+      activeOpacity={0.7}
+      accessibilityRole="button"
+      accessibilityState={{ selected: isActive }}
+    >
+      <View style={styles.iconContainer}>{getTabIcon(tab, isActive)}</View>
+      <Text style={[styles.label, { color: isActive ? ACTIVE_TEXT_COLOR : INACTIVE_TEXT_COLOR }]}>
+        {tab}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+export const Navbar: React.FC<NavbarProps> = ({ currentTab, onSwitchTab }) => {
+  return (
+    <View style={styles.container}>
+      <TabButton tab="Home" isActive={currentTab === "Home"} onPress={() => onSwitchTab("Home")} />
+      <TabButton
+        tab="Search"
+        isActive={currentTab === "Search"}
+        onPress={() => onSwitchTab("Search")}
+      />
+      <TabButton
+        tab="Library"
+        isActive={currentTab === "Library"}
+        onPress={() => onSwitchTab("Library")}
+      />
+    </View>
+  );
+};

frontend/assets/icons/library-filled.svg

@@ -66,7 +66,7 @@ export const mockActivities: Activity[] = [
     description:
       "A high-energy tournament style game where students compete to become the ultimate champion.",
     energyLevel: "High",
-    environment: "Both",
+    environment: "Outdoor",
     isSaved: true,
     hasTutorial: false,
     imageUrl: "https://via.placeholder.com/400x300",
@@ -231,7 +231,7 @@ export const mockActivities: Activity[] = [
     description:
       "A physical puzzle where a group must untangle themselves without letting go of hands.",
     energyLevel: "Medium",
-    environment: "Both",
+    environment: "Indoor",
     isSaved: false,
     hasTutorial: true,
     imageUrl: "https://via.placeholder.com/400x300",

frontend/assets/icons/library.svg

@@ -8,7 +8,7 @@ export type Category =
 
 export type EnergyLevel = "Low" | "Medium" | "High";
 
-export type Environment = "Indoor" | "Outdoor" | "Both";
+export type Environment = "Indoor" | "Outdoor";
 
 // Helper type for numeric ranges (filtering)
 export type Range = {