From 6cfe9d19e32d25a12836c7a405f2392a76738ee0 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 12 Sep 2025 11:42:43 +0530
Subject: [PATCH] extract emoji search component

---
 .../emoji-board/components/SearchInput.tsx    | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 src/app/components/emoji-board/components/SearchInput.tsx

diff --git a/src/app/components/emoji-board/components/SearchInput.tsx b/src/app/components/emoji-board/components/SearchInput.tsx
new file mode 100644
index 00000000..6de4d977
--- /dev/null
+++ b/src/app/components/emoji-board/components/SearchInput.tsx
@@ -0,0 +1,51 @@
+import React, { ChangeEventHandler, useRef } from 'react';
+import { Input, Chip, Icon, Icons, Text } from 'folds';
+import { mobileOrTablet } from '../../../utils/user-agent';
+
+type SearchInputProps = {
+  query?: string;
+  onChange: ChangeEventHandler<HTMLInputElement>;
+  allowTextCustomEmoji?: boolean;
+  onTextCustomEmojiSelect?: (text: string) => void;
+};
+export function SearchInput({
+  query,
+  onChange,
+  allowTextCustomEmoji,
+  onTextCustomEmojiSelect,
+}: SearchInputProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleReact = () => {
+    const textEmoji = inputRef.current?.value.trim();
+    if (!textEmoji) return;
+    onTextCustomEmojiSelect?.(textEmoji);
+  };
+
+  return (
+    <Input
+      ref={inputRef}
+      variant="SurfaceVariant"
+      size="400"
+      placeholder={allowTextCustomEmoji ? 'Search or Text Reaction ' : 'Search'}
+      maxLength={50}
+      after={
+        allowTextCustomEmoji && query ? (
+          <Chip
+            variant="Primary"
+            radii="Pill"
+            after={<Icon src={Icons.ArrowRight} size="50" />}
+            outlined
+            onClick={handleReact}
+          >
+            <Text size="L400">React</Text>
+          </Chip>
+        ) : (
+          <Icon src={Icons.Search} size="50" />
+        )
+      }
+      onChange={onChange}
+      autoFocus={!mobileOrTablet()}
+    />
+  );
+}