Contextual Search

import { ContextualSearch } from '@/components/ui/contextual-search'

export default function Example() {
 const handleSearch = (query: string) => {
 // Perform search
 console.log('Searching for:', query)
 }

 const handleSuggestionClick = (suggestion: { text: string; reason: string }) => {
 // Use the suggestion
 console.log('Selected:', suggestion.text)
 }

 return (
 <>
 {/* With defaults */}
 <ContextualSearch onSearch={handleSearch} />

 {/* Custom configuration */}
 <ContextualSearch
 placeholder="Search projects, tasks, people..."
 recentSearches={['project A', 'team B', 'budget C']}
 aiSuggestions={[
 {
 text: 'Tasks due this week',
 reason: 'Based on your current focus'
 },
 {
 text: 'Team performance',
 reason: 'You check this every Monday'
 }
 ]}
 onSearch={handleSearch}
 onRecentClick={(search) => setQuery(search)}
 onSuggestionClick={handleSuggestionClick}
 onClearRecent={() => clearHistory()}
 />

 {/* Initially closed */}
 <ContextualSearch defaultOpen={false} />
 </>
 )
}