packages/excalidraw/components/QuickSearch.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import clsx from "clsx";
import React from "react";
import { searchIcon } from "./icons";

import "./QuickSearch.scss";

interface QuickSearchProps {
  className?: string;
  placeholder: string;
  onChange: (term: string) => void;
}

export const QuickSearch = React.forwardRef<HTMLInputElement, QuickSearchProps>(
  ({ className, placeholder, onChange }, ref) => {
    return (
      <div className={clsx("QuickSearch__wrapper", className)}>
        {searchIcon}
        <input
          ref={ref}
          className="QuickSearch__input"
          type="text"
          placeholder={placeholder}
          onChange={(e) => onChange(e.target.value.trim().toLowerCase())}
        />
      </div>
    );
  },
);