wip: browse user

src/app/browse/index.tsx

@@ -1,7 +1,38 @@
+import { NavLink, Outlet } from 'react-router-dom';
+import { twMerge } from 'tailwind-merge';
+
 export function BrowseScreen() {
   return (
-    <div>
-      <p>TODO</p>
+    <div className="relative h-full w-full">
+      <div className="absolute left-0 right-0 top-4 flex w-full items-center justify-between px-3">
+        <div className="w-10" />
+        <div className="inline-flex gap-1 rounded-full border-t border-white/10 bg-white/20 p-1">
+          <NavLink
+            to="/browse/"
+            className={({ isActive }) =>
+              twMerge(
+                'inline-flex h-8 w-20 items-center justify-center rounded-full text-sm font-semibold',
+                isActive ? 'bg-white/10 hover:bg-white/20' : ' hover:bg-white/5'
+              )
+            }
+          >
+            Users
+          </NavLink>
+          <NavLink
+            to="/browse/relays"
+            className={({ isActive }) =>
+              twMerge(
+                'inline-flex h-8 w-20 items-center justify-center rounded-full text-sm font-semibold',
+                isActive ? 'bg-white/10 hover:bg-white/20' : ' hover:bg-white/5'
+              )
+            }
+          >
+            Relays
+          </NavLink>
+        </div>
+        <div className="w-10" />
+      </div>
+      <Outlet />
     </div>
   );
 }