From 3cffe8962008038aedff8d099cab458296a5ca4e Mon Sep 17 00:00:00 2001 From: thesn10 <38666407+thesn10@users.noreply.github.com> Date: Wed, 24 Jun 2026 23:38:32 +0200 Subject: [PATCH] feat: add Nav component --- app/src/components/Nav.tsx | 219 +++++++++++++++++++++++++++++++++++++ 1 file changed, 219 insertions(+) create mode 100644 app/src/components/Nav.tsx diff --git a/app/src/components/Nav.tsx b/app/src/components/Nav.tsx new file mode 100644 index 0000000..e6292cb --- /dev/null +++ b/app/src/components/Nav.tsx @@ -0,0 +1,219 @@ +'use client' + +import { usePathname, useRouter } from 'next/navigation' +import { useState, useRef, useEffect } from 'react' +import { useCluster } from '@solana/connector/react' +import { ConnectButton } from '@/components/connector/connect-button' + +const NAV_LINKS = [ + { href: '/listings', label: 'Listings' }, + { href: '/escrows', label: 'Escrows' }, + { href: '/resolvers', label: 'Resolvers' }, + { href: '/dashboard', label: 'Dashboard' }, +] + +const NET_DOTS: Record = { + 'solana:localnet': '#FF7A59', + 'solana:devnet': '#14F195', + 'solana:mainnet': '#9945FF', +} + +export function Nav() { + const pathname = usePathname() + const router = useRouter() + const { cluster, clusters, setCluster } = useCluster() + const [netOpen, setNetOpen] = useState(false) + const [search, setSearch] = useState('') + const netRef = useRef(null) + + useEffect(() => { + function close(e: MouseEvent) { + if (netRef.current && !netRef.current.contains(e.target as Node)) setNetOpen(false) + } + document.addEventListener('mousedown', close) + return () => document.removeEventListener('mousedown', close) + }, []) + + function handleSearch(e: React.KeyboardEvent) { + if (e.key === 'Enter' && search.trim()) { + router.push(`/search?q=${encodeURIComponent(search.trim())}`) + setSearch('') + } + } + + const dot = NET_DOTS[cluster?.id ?? ''] ?? '#8A8FA3' + + return ( + + ) +}