aboutsummaryrefslogtreecommitdiffstats
path: root/packages/excalidraw/components/QuickSearch.tsx
diff options
context:
space:
mode:
authorkj_sh6042026-03-15 16:19:35 -0400
committerkj_sh6042026-03-15 16:19:35 -0400
commit6ec259a0e71174651bae95d4628138bf6fd68742 (patch)
tree5e33c6a5ec091ecabfcb257fdc7b6a88ed8754ac /packages/excalidraw/components/QuickSearch.tsx
parent16c8578b15c727f22921f8a80a56ee4d4e7f2272 (diff)
refactor: packages/
Diffstat (limited to 'packages/excalidraw/components/QuickSearch.tsx')
-rw-r--r--packages/excalidraw/components/QuickSearch.tsx28
1 files changed, 28 insertions, 0 deletions
diff --git a/packages/excalidraw/components/QuickSearch.tsx b/packages/excalidraw/components/QuickSearch.tsx
new file mode 100644
index 0000000..c7ec78b
--- /dev/null
+++ b/packages/excalidraw/components/QuickSearch.tsx
@@ -0,0 +1,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>
+ );
+ },
+);