chore: initial import

apps/visualizer/src/layout/TopNav.tsx

@@ -0,0 +1,62 @@
+import type { ReactNode } from 'react';
+import Button from '../ui/Button';
+
+type NavId = 'portfolio' | 'trade' | 'earn' | 'vaults' | 'leaderboard' | 'more';
+
+const navItems: Array<{ id: NavId; label: string }> = [
+  { id: 'portfolio', label: 'Portfolio' },
+  { id: 'trade', label: 'Trade' },
+  { id: 'earn', label: 'Earn' },
+  { id: 'vaults', label: 'Vaults' },
+  { id: 'leaderboard', label: 'Leaderboard' },
+  { id: 'more', label: 'More' },
+];
+
+type Props = {
+  active?: NavId;
+  onSelect?: (id: NavId) => void;
+  rightSlot?: ReactNode;
+};
+
+export default function TopNav({ active = 'trade', onSelect, rightSlot }: Props) {
+  return (
+    <header className="topNav">
+      <div className="topNav__left">
+        <div className="topNav__brand" aria-label="Drift">
+          <div className="topNav__brandMark" aria-hidden="true" />
+          <div className="topNav__brandName">Drift</div>
+        </div>
+        <nav className="topNav__menu" aria-label="Primary">
+          {navItems.map((it) => (
+            <button
+              key={it.id}
+              type="button"
+              className={['topNav__link', active === it.id ? 'topNav__link--active' : ''].filter(Boolean).join(' ')}
+              onClick={() => onSelect?.(it.id)}
+            >
+              {it.label}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      <div className="topNav__right">
+        {rightSlot ?? (
+          <>
+            <Button size="sm" variant="primary" type="button">
+              Deposit
+            </Button>
+            <button className="topNav__iconBtn" type="button" aria-label="Settings">
+              ⚙
+            </button>
+            <div className="topNav__account">
+              <div className="topNav__accountName">Main Account</div>
+              <div className="topNav__accountSub">visualizer</div>
+            </div>
+          </>
+        )}
+      </div>
+    </header>
+  );
+}
+