Command

import { Button } from "sebs7n-ui/button"
import { CommandDialog, CommandFilter, CommandFilters, CommandInput } from "sebs7n-ui/command"
import { Kbd } from "sebs7n-ui/kbd"
import { SearchIcon } from "lucide-react"
import { useEffect, useState } from "react"

function Basico() {
  const [abierto, setAbierto] = useState(false)
  const [filtro, setFiltro] = useState("todo")
  const [elegido, setElegido] = useState<string | null>(null)

  // El atajo lo registra la app: el componente no escucha teclas globales. ⌘J y no ⌘K porque en
  // este sitio ⌘K abre el buscador, y con los dos escuchando se abrirían dos paletas.
  useEffect(() => {
    const onKeyDown = (event: KeyboardEvent) => {
      if (event.key.toLowerCase() !== "j" || !(event.metaKey || event.ctrlKey)) return
      event.preventDefault()
      setAbierto((previo) => !previo)
    }
    window.addEventListener("keydown", onKeyDown)
    return () => window.removeEventListener("keydown", onKeyDown)
  }, [])

  return (
    <div className="flex flex-col items-center gap-3">
      <Button aria-keyshortcuts="Meta+J" onClick={() => setAbierto(true)} variant="secondary">
        <SearchIcon />
        Buscar en facturación
        <Kbd size="sm">⌘J</Kbd>
      </Button>
      {elegido && <p className="text-body text-label-secondary">Elegiste: {elegido}</p>}
      <CommandDialog labels={{ dialog: "Buscar en facturación" }} onOpenChange={setAbierto} open={abierto}>
        <CommandInput placeholder="Facturas, clientes, acciones…" />
        <CommandFilters onValueChange={setFiltro} value={filtro}>
          <CommandFilter value="todo">Todo</CommandFilter>
          <CommandFilter value="facturas">Facturas</CommandFilter>
          <CommandFilter value="clientes">Clientes</CommandFilter>
        </CommandFilters>
        <Resultados
          filtro={filtro}
          onSelect={(value) => {
            setElegido(value)
            setAbierto(false)
          }}
        />
      </CommandDialog>
    </div>
  )
}

import { Command, CommandInput } from "sebs7n-ui/command"
import { useState } from "react"

function Incrustado() {
  const [elegido, setElegido] = useState<string | null>(null)
  return (
    <div className="flex w-full max-w-md flex-col gap-2">
      <Command className="rounded-surface bg-grouped p-1">
        <CommandInput />
        <Resultados filtro="todo" onSelect={setElegido} />
      </Command>
      {elegido && <p className="text-body text-label-secondary">Elegiste: {elegido}</p>}
    </div>
  )
}