blob: 01a33c97014e016a759db629a039134a05bf2ba8 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
import React, { useState, useEffect } from 'react'
import { Search } from 'lucide-react'
import { Button } from '@/components/ui/button'
import SearchDialog from './SearchDialog'
import { ErrorBoundary } from './ErrorBoundary'
const SearchButton: React.FC = () => {
const [isOpen, setIsOpen] = useState(false)
// Keyboard shortcut: Cmd/Ctrl + K
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
// Don't trigger if user is typing in an input, textarea, or contenteditable
const target = e.target as HTMLElement
const isInput =
target.tagName === 'INPUT' ||
target.tagName === 'TEXTAREA' ||
target.isContentEditable
if ((e.metaKey || e.ctrlKey) && e.key === 'k' && !isInput) {
e.preventDefault()
setIsOpen(true)
}
}
window.addEventListener('keydown', handleKeyDown)
return () => window.removeEventListener('keydown', handleKeyDown)
}, [])
return (
<ErrorBoundary>
<Button
variant="ghost"
size="icon"
onClick={() => setIsOpen(true)}
// className="md:hover:bg-muted size-9 border md:-my-2 md:-me-2 md:size-8 border-0 md:bg-transparent"
className="-my-2 -me-2 size-8"
title="Search (⌘K)"
aria-label="Search blog posts"
aria-expanded={isOpen}
aria-haspopup="dialog"
>
<Search className="text-muted-foreground h-5 w-5 md:h-4 md:w-4" />
<span className="sr-only">Search</span>
</Button>
<ErrorBoundary>
<SearchDialog open={isOpen} onOpenChange={setIsOpen} />
</ErrorBoundary>
</ErrorBoundary>
)
}
export default SearchButton
|
