b443fc787e
TopBar was a monolith that hardcoded server-specific controls (status filters, time range, auto-refresh, search trigger). Extract these into standalone SearchTrigger and AutoRefreshToggle components. TopBar now accepts children for the center slot, letting consumers compose their own controls. Fixes cameleer/cameleer-saas#53. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
25 lines
642 B
TypeScript
25 lines
642 B
TypeScript
import { Search } from 'lucide-react'
|
|
import styles from './TopBar.module.css'
|
|
|
|
interface SearchTriggerProps {
|
|
onClick: () => void
|
|
className?: string
|
|
}
|
|
|
|
export function SearchTrigger({ onClick, className }: SearchTriggerProps) {
|
|
return (
|
|
<button
|
|
className={`${styles.search} ${className ?? ''}`}
|
|
onClick={onClick}
|
|
type="button"
|
|
aria-label="Open search"
|
|
>
|
|
<span className={styles.searchIcon} aria-hidden="true">
|
|
<Search size={13} />
|
|
</span>
|
|
<span className={styles.searchPlaceholder}>Search... ⌘K</span>
|
|
<span className={styles.kbd}>Ctrl+K</span>
|
|
</button>
|
|
)
|
|
}
|