Add search input

components/search-input/index.tsx

@@ -0,0 +1,83 @@
+import {
+  Dispatch,
+  FunctionComponent,
+  SetStateAction,
+  useRef,
+  useState,
+} from "react";
+
+import Image from "next/image";
+
+import styled from "styled-components";
+import color from "../../styles/color";
+
+import SearchIcon from "../../public/images/svg/search-icon.svg";
+
+interface Props {
+  searchValue: string;
+  setSearchValue: Dispatch<SetStateAction<string>>;
+}
+
+export const SearchInput: FunctionComponent<Props> = (props) => {
+  const { searchValue, setSearchValue } = props;
+
+  return (
+    <SearchContainer>
+      <SearchIconContainer>
+        <Image src={SearchIcon} fill={true} alt="search icon" />
+      </SearchIconContainer>
+
+      <SearchText
+        type="text"
+        placeholder="search"
+        value={searchValue}
+        onChange={(event) => {
+          setSearchValue(event.target.value);
+        }}
+      />
+    </SearchContainer>
+  );
+};
+
+const SearchContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+
+  min-width: 10rem;
+  height: 2rem;
+
+  padding: 0.5rem 1.3rem;
+
+  border-radius: 3rem;
+  background-color: ${color.grey["700"]};
+`;
+
+const SearchIconContainer = styled.div`
+  position: relative;
+
+  width: 1.3rem;
+  height: 1.3rem;
+`;
+
+const SearchText = styled.input`
+  border: none;
+
+  color: ${color.white};
+  background-color: ${color.grey["700"]};
+
+  font-family: "Inter", serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.2rem;
+
+  ::placeholder,
+  ::-webkit-input-placeholder {
+    color: ${color.grey["400"]};
+  }
+
+  &:focus {
+    outline: none;
+  }
+`;

pages/verification/index.tsx

@@ -27,6 +27,7 @@ import { ChainIdHelper } from "@keplr-wallet/cosmos";
 
 import AllChainsIcon from "../../public/images/svg/all-chains-icon.svg";
 import { AllChainsItem } from "../../components/chain-list/all-chains-item";
+import { SearchInput } from "../../components/search-input";
 
 export default function VerificationPage() {
   const router = useRouter();
@@ -40,6 +41,7 @@ export default function VerificationPage() {
   const [chainList, setChainList] = useState<ChainItemType[]>([]);
   const [checkedItems, setCheckedItems] = useState(new Set());
   const [allChecked, setAllChecked] = useState(false);
+  const [searchValue, setSearchValue] = useState("");
 
   useEffect(() => {
     const handleVerification = async () => {
@@ -182,10 +184,13 @@ export default function VerificationPage() {
 
             <ChainListTitleContainer>
               <ChainListTitle>Chain List</ChainListTitle>
-              <SearchContainer>Search</SearchContainer>
+              <SearchInput
+                searchValue={searchValue}
+                setSearchValue={setSearchValue}
+              />
             </ChainListTitleContainer>
 
-            {allChains ? (
+            {allChains && !searchValue ? (
               <AllChainsItem
                 allChecked={allChecked}
                 setAllChecked={setAllChecked}
@@ -196,7 +201,12 @@ export default function VerificationPage() {
             <ChainList
               allChecked={allChecked}
               setAllChecked={setAllChecked}
-              chainList={chainList}
+              chainList={chainList.filter(
+                (chain) =>
+                  chain.chainId.includes(searchValue) ||
+                  chain.address.includes(searchValue) ||
+                  chain.prefix.includes(searchValue),
+              )}
               checkedItems={checkedItems}
               setCheckedItems={setCheckedItems}
             />
@@ -264,15 +274,3 @@ const ChainListTitle = styled.div`
 
   color: ${color.white};
 `;
-
-const SearchContainer = styled.div`
-  display: flex;
-  align-items: center;
-
-  border-radius: 3rem;
-
-  min-width: 10rem;
-  height: 2rem;
-
-  background-color: ${color.grey["700"]};
-`;

public/images/svg/search-icon.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.08358 3.5C5.9967 3.5 3.5 5.93947 3.5 8.95559C3.5 11.9717 5.9967 14.4112 9.08358 14.4112C10.1857 14.4112 11.2056 14.0953 12.0704 13.5587L16.1041 17.5L17.5 16.1361L13.5176 12.255C14.2335 11.3374 14.6672 10.2004 14.6672 8.95559C14.6672 5.93947 12.1705 3.5 9.08358 3.5ZM9.08358 4.78367C11.4481 4.78367 13.3534 6.64524 13.3534 8.95559C13.3534 11.2659 11.4481 13.1275 9.08358 13.1275C6.71902 13.1275 4.81378 11.2659 4.81378 8.95559C4.81378 6.64524 6.71902 4.78367 9.08358 4.78367Z" fill="#5B5B5B"/>
+</svg>