feat: move to nextjs

components/Body/IFrameConnectTab/SupportedDapps/DappsSearch.tsx

@@ -0,0 +1,40 @@
+import {
+  Center,
+  InputGroup,
+  Input,
+  InputRightElement,
+  Button,
+} from "@chakra-ui/react";
+import { CloseIcon } from "@chakra-ui/icons";
+
+interface DappsSearchParams {
+  searchSafeDapp: string | undefined;
+  setSearchSafeDapp: (value: string) => void;
+}
+
+function DappsSearch({ searchSafeDapp, setSearchSafeDapp }: DappsSearchParams) {
+  return (
+    <Center pb="0.5rem">
+      <InputGroup maxW="30rem">
+        <Input
+          placeholder="search 🔎"
+          value={searchSafeDapp}
+          onChange={(e) => setSearchSafeDapp(e.target.value)}
+        />
+        {searchSafeDapp && (
+          <InputRightElement width="3rem">
+            <Button
+              size="xs"
+              variant={"ghost"}
+              onClick={() => setSearchSafeDapp("")}
+            >
+              <CloseIcon />
+            </Button>
+          </InputRightElement>
+        )}
+      </InputGroup>
+    </Center>
+  );
+}
+
+export default DappsSearch;