46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { SearchDropdown } from './SearchDropdown'
|
|
|
|
type SearchResultItem = {
|
|
result_type: string
|
|
slug: string
|
|
name: string
|
|
detail?: string
|
|
}
|
|
|
|
type HeaderProps = {
|
|
searchOpen: boolean
|
|
searchResults: SearchResultItem[]
|
|
onSearchSelect: (type: string, slug: string) => void
|
|
}
|
|
|
|
export function Header({
|
|
searchOpen,
|
|
searchResults,
|
|
onSearchSelect,
|
|
}: HeaderProps) {
|
|
return (
|
|
<header className="header">
|
|
<div className="header-logo">
|
|
<button className="btn-menu">☰</button>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<circle cx="9" cy="18" r="3" />
|
|
<circle cx="18" cy="15" r="3" />
|
|
<path d="M12 18V6l9-3v3" />
|
|
</svg>
|
|
Furumi
|
|
<span className="header-version">v</span>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
|
<div className="search-wrap">
|
|
<input id="searchInput" placeholder="Search..." />
|
|
<SearchDropdown
|
|
isOpen={searchOpen}
|
|
results={searchResults}
|
|
onSelect={onSearchSelect}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|