From f02cc627e40ae204ed35a78945422e35d764a478 Mon Sep 17 00:00:00 2001
From: thesn10 <38666407+thesn10@users.noreply.github.com>
Date: Thu, 2 Jul 2026 22:42:02 +0200
Subject: [PATCH] Add TopNav component

---
 app/src/components/TopNav.tsx | 58 +++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 app/src/components/TopNav.tsx

diff --git a/app/src/components/TopNav.tsx b/app/src/components/TopNav.tsx
new file mode 100644
index 0000000..ed34d98
--- /dev/null
+++ b/app/src/components/TopNav.tsx
@@ -0,0 +1,58 @@
+import type { JSX } from "react";
+import { useState } from "react";
+import { Pressable, View } from "react-native";
+import { useRouter } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
+import { Button, SearchField, Typography, useThemeColor } from "heroui-native";
+import { useWallet } from "@/state/wallet";
+import { useModals } from "@/state/modals";
+
+export function TopNav(): JSX.Element {
+  const router = useRouter();
+  const accentForeground = useThemeColor("accent-foreground");
+  const { connected, address, disconnect } = useWallet();
+  const { openWalletConnect } = useModals();
+  const [search, setSearch] = useState("");
+
+  return (
+    <View className="hidden h-16 flex-row items-center gap-4 border-b border-border bg-background px-6 md:flex">
+      <Pressable onPress={() => router.push("/")} className="flex-row items-center gap-2">
+        <View className="size-6 items-center justify-center rounded-md bg-accent">
+          <Ionicons name="list" size={14} color={accentForeground} />
+        </View>
+        <Typography type="h6">Volana</Typography>
+      </Pressable>
+
+      <View className="max-w-[320px] flex-1">
+        <SearchField value={search} onChange={setSearch}>
+          <SearchField.Group>
+            <SearchField.SearchIcon />
+            <SearchField.Input
+              placeholder="Search listings…"
+              onSubmitEditing={() => router.push("/browse")}
+            />
+          </SearchField.Group>
+        </SearchField>
+      </View>
+
+      <View className="flex-1" />
+
+      <Button variant="ghost" size="sm" onPress={() => router.push("/browse")}>
+        <Button.Label>Browse</Button.Label>
+      </Button>
+      <Button variant="ghost" size="sm" onPress={() => router.push("/orders")}>
+        <Button.Label>My Orders</Button.Label>
+      </Button>
+
+      {connected ? (
+        <Button variant="secondary" size="sm" onPress={disconnect}>
+          <Button.Label>{address}</Button.Label>
+        </Button>
+      ) : (
+        <Button size="sm" onPress={openWalletConnect}>
+          <Button.Label>Connect Wallet</Button.Label>
+        </Button>
+      )}
+    </View>
+  );
+}