frontend

src/components/TopBar.jsx

@@ -0,0 +1,46 @@
+import { Search, MessageCircle, LayoutGrid } from 'lucide-react';
+import { NavigationHeader } from './NavigationHeader';
+
+export function TopBar({ mode, onModeChange, query, onQueryChange, onSubmit, health, onResetHome }) {
+  return (
+    <NavigationHeader health={health} onResetHome={onResetHome}>
+      <div className="flex flex-col sm:flex-row items-center gap-3 pt-1">
+        <div className="flex shrink-0 items-center gap-1 rounded-full bg-ink-100/80 p-1 text-xs">
+          <ModeButton icon={LayoutGrid} label="Browse & Search" active={mode === 'search'} onClick={() => onModeChange('search')} />
+          <ModeButton icon={MessageCircle} label="Ask AI" active={mode === 'chat'} onClick={() => onModeChange('chat')} />
+        </div>
+
+        {mode === 'search' && (
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              onSubmit();
+            }}
+            className="relative flex-1 w-full"
+          >
+            <Search className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
+            <input
+              value={query}
+              onChange={(e) => onQueryChange(e.target.value)}
+              placeholder="Search catalog products — e.g. 'Recommend Paneer under ₹150', 'How many products in Cadbury?'"
+              className="w-full rounded-full border border-ink-900/10 bg-white py-2 pl-10 pr-4 text-xs text-ink-950 placeholder:text-slate-400 focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-500/20 shadow-xs"
+            />
+          </form>
+        )}
+      </div>
+    </NavigationHeader>
+  );
+}
+
+function ModeButton({ icon: Icon, label, active, onClick }) {
+  return (
+    <button
+      onClick={onClick}
+      className={`flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-xs font-semibold transition ${
+        active ? 'bg-white text-ink-950 shadow-xs' : 'text-slate-500 hover:text-ink-900'
+      }`}
+    >
+      <Icon className="h-3.5 w-3.5" /> {label}
+    </button>
+  );
+}