From 1602ef92c885c7d8ccbd786fd47ea7a5803021cd Mon Sep 17 00:00:00 2001
From: HeesungB <hezo25@naver.com>
Date: Tue, 13 Dec 2022 22:10:31 +0900
Subject: [PATCH] Add search input

---
 components/search-input/index.tsx | 83 +++++++++++++++++++++++++++++++
 pages/verification/index.tsx      | 28 +++++------
 public/images/svg/search-icon.svg |  3 ++
 3 files changed, 99 insertions(+), 15 deletions(-)
 create mode 100644 components/search-input/index.tsx
 create mode 100644 public/images/svg/search-icon.svg

diff --git a/components/search-input/index.tsx b/components/search-input/index.tsx
new file mode 100644
index 0000000..f535cbb
--- /dev/null
+++ b/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;
+  }
+`;
diff --git a/pages/verification/index.tsx b/pages/verification/index.tsx
index a5cc2b0..8e79ab8 100644
--- a/pages/verification/index.tsx
+++ b/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"]};
-`;
diff --git a/public/images/svg/search-icon.svg b/public/images/svg/search-icon.svg
new file mode 100644
index 0000000..f1406e1
--- /dev/null
+++ b/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>