47 lines
2.0 KiB
JavaScript
47 lines
2.0 KiB
JavaScript
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>
|
|
);
|
|
}
|