cosscom__coss/apps/origin/components/search-button.tsx

"use client";

import { RiSearch2Line } from "@remixicon/react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect } from "react";

export default function SearchButton() {
  const router = useRouter();

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
        e.preventDefault();
        router.push("/search");
      }
    };

    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [router]);

  return (
    <Link
      className="inline-flex h-10 w-fit min-w-72 cursor-text rounded-full border bg-background px-4 py-2 text-foreground text-sm outline-none placeholder:text-muted-foreground/70 focus:border-ring focus:ring-[3px] focus:ring-ring/50"
      href="/search"
    >
      <span className="flex grow items-center gap-2">
        <RiSearch2Line
          aria-hidden="true"
          className="-ms-1 text-muted-foreground"
          size={20}
        />
        <span className="font-normal text-zinc-400 dark:text-zinc-500">
          Quick search...
        </span>
        <div className="pointer-events-none ml-auto flex items-center justify-center text-muted-foreground/80">
          <kbd className="inline-flex font-[inherit] font-medium text-muted-foreground text-xs">
            <span className="opacity-70">⌘</span>K
          </kbd>
        </div>
      </span>
    </Link>
  );
}