Boris Cherepanov
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import { SearchDropdown } from '../SearchDropdown'
|
|
import styles from './header.module.css'
|
|
|
|
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={styles.header}>
|
|
<div className={styles.headerLogo}>
|
|
<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={styles.headerVersion}>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>
|
|
)
|
|
}
|