1import type { FC, HTMLAttributes } from "react";
 2import { SearchIcon } from "lucide-react";
 3
 4export const SearchBox: FC<HTMLAttributes<HTMLDivElement>> = ({ ...props }) => {
 5    return (
 6        <div
 7            className="bg-gray-800 p-2 md:w-60 flex flex-row items-center rounded-md justify-between"
 8            {...props}
 9        >
10            <div className="flex flex-row items-center gap-1">
11                <SearchIcon className="size-4 text-muted dark:text-muted-foreground" />
12                <p className="text-sm text-muted dark:text-muted-foreground ">Search</p>
13            </div>
14            <kbd className="pointer-events-none md:inline-flex h-5 select-none items-center gap-1 rounded bg-gray-600 px-1.5 font-mono text-[10px] font-medium text-muted dark:text-muted-foreground hidden">
15                <span className="text-xs">CTRL</span>K
16            </kbd>
17        </div>
18    );
19};