github.com/turbot/steampipe@v1.7.0-rc.0.0.20240517123944-7cef272d4458/ui/dashboard/src/components/SearchInput/index.js (about)

     1  import { classNames } from "../../utils/styles";
     2  import { ClearIcon, SearchIcon } from "../../constants/icons";
     3  import { forwardRef } from "react";
     4  import { ThemeNames } from "../../hooks/useTheme";
     5  import { useDashboard } from "../../hooks/useDashboard";
     6  
     7  const SearchInput = forwardRef(
     8    (
     9      {
    10        className,
    11        disabled = false,
    12        placeholder,
    13        readOnly = false,
    14        setValue,
    15        value,
    16      },
    17      ref
    18    ) => {
    19      const {
    20        themeContext: { theme },
    21      } = useDashboard();
    22      return (
    23        <div className="relative">
    24          <div className="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center text-foreground-light text-sm">
    25            <SearchIcon className="h-4 w-4" />
    26          </div>
    27          <input
    28            className={classNames(
    29              className,
    30              "flex-1 block w-full bg-dashboard-panel rounded-md border px-8 overflow-x-auto text-sm md:text-base disabled:bg-black-scale-1 focus:ring-0",
    31              theme.name === ThemeNames.STEAMPIPE_DARK
    32                ? "border-gray-700"
    33                : "border-[#e7e9ed]"
    34            )}
    35            disabled={disabled}
    36            onChange={(e) => setValue(e.target.value)}
    37            placeholder={placeholder}
    38            readOnly={readOnly}
    39            ref={ref}
    40            type="text"
    41            value={value}
    42          />
    43          {value && (
    44            <div
    45              className="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer text-foreground"
    46              onClick={() => setValue("")}
    47            >
    48              <ClearIcon className="h-4 w-4" />
    49            </div>
    50          )}
    51        </div>
    52      );
    53    }
    54  );
    55  
    56  export default SearchInput;