first commit

mobile/src/components/BottomNav.tsx

@@ -0,0 +1,61 @@
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { useRouter } from "../router";
+import { TABS } from "../../App";
+
+
+export function BottomNav() {
+  const { route, navigate } = useRouter();
+
+  return (
+    <View style={styles.bar}>
+      {TABS.map((tab) => {
+        const active = tab.route === route;
+        return (
+          <TouchableOpacity
+            key={tab.route}
+            style={styles.tab}
+            onPress={() => navigate(tab.route)}
+            activeOpacity={0.7}
+          >
+            <Text style={[styles.label, active && styles.labelActive]}>
+              {tab.label}
+            </Text>
+            {active && <View style={styles.indicator} />}
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  bar: {
+    flexDirection: "row",
+    height: 74,
+    borderTopWidth:1,
+    borderTopColor: "#e5e5e5",
+    backgroundColor: "#fff",
+  },
+  tab: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  label: {
+    fontSize: 13,
+    color: "#aaa",
+    fontWeight: "500",
+  },
+  labelActive: {
+    color: "#1a1a1a",
+    fontWeight: "700",
+  },
+  indicator: {
+    position: "absolute",
+    top: 0,
+    width: 32,
+    height: 3,
+    borderRadius: 2,
+    backgroundColor: "#1a1a1a",
+  },
+});