How to implement CMD+K search module in Next.js with Sanity?

import {client} from '@/sanity/lib/client'

async function searchContent(query: string) {
  const results = await client.fetch(
    `*[_type in ["post", "page"] && [title, body] match $query] | order(_score desc) [0...10] {
      _id,
      _type,
      title,
      slug
    }`,
    {query: `${query}*`}
  )
  return results
}

*[_type == "post" && title match $query] 
| score(
    boost(title match $query, 3),
    boost(body match $query, 1)
  )
| order(_score desc)

'use client'

import {Command} from 'cmdk'
import {useState, useEffect} from 'react'
import {useRouter} from 'next/navigation'

export function SearchModal() {
  const [open, setOpen] = useState(false)
  const [search, setSearch] = useState('')
  const [results, setResults] = useState([])
  const router = useRouter()

  // Keyboard shortcut
  useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
        e.preventDefault()
        setOpen((open) => !open)
      }
    }
    document.addEventListener('keydown', down)
    return () => document.removeEventListener('keydown', down)
  }, [])

  // Debounced search
  useEffect(() => {
    if (!search) return
    const timer = setTimeout(async () => {
      const data = await fetch(`/api/search?q=${search}`).then(r => r.json())
      setResults(data)
    }, 300)
    return () => clearTimeout(timer)
  }, [search])

  return (
    <Command.Dialog open={open} onOpenChange={setOpen}>
      <Command.Input 
        value={search} 
        onValueChange={setSearch}
        placeholder="Search content..." 
      />
      <Command.List>
        {results.map((item) => (
          <Command.Item
            key={item._id}
            onSelect={() => {
              router.push(`/${item.slug.current}`)
              setOpen(false)
            }}
          >
            {item.title}
          </Command.Item>
        ))}
      </Command.List>
    </Command.Dialog>
  )
}