fix

src/components/Topbar.tsx

@@ -2,8 +2,7 @@ import { useState } from 'react'
 import { Icon } from './Icon'
 
 type TopbarProps = {
-  query: string
-  onQueryChange: (value: string) => void
+  onOpenSearch: () => void
   onMenuToggle: () => void
 }
 
@@ -41,7 +40,7 @@ function useTheme() {
   return { theme, toggle }
 }
 
-export function Topbar({ query, onQueryChange, onMenuToggle }: TopbarProps) {
+export function Topbar({ onOpenSearch, onMenuToggle }: TopbarProps) {
   const { theme, toggle } = useTheme()
 
   return (
@@ -54,15 +53,16 @@ export function Topbar({ query, onQueryChange, onMenuToggle }: TopbarProps) {
         <span className="version">v0.8.2</span>
       </div>
 
-      <div className="top-search">
+      <button
+        type="button"
+        className="top-search"
+        onClick={onOpenSearch}
+        aria-label="Search components, tokens, docs (Press ⌘K)"
+      >
         <Icon name="search" size={16} />
-        <input
-          value={query}
-          onChange={e => onQueryChange(e.target.value)}
-          placeholder="Search components, tokens, docs..."
-        />
+        <span className="top-search-placeholder">Search components, tokens, docs...</span>
         <kbd>⌘ K</kbd>
-      </div>
+      </button>
 
       <nav className="top-links">
         <a href="#docs">Docs</a>