Add Search to vote page (#63)

packages/DApp/src/components/Input.tsx

@@ -20,14 +20,11 @@ export const Input = styled.input`
 
 export const Search = styled(Input)`
   width: 270px;
-  padding: 7px 36px;
+  padding: 6px 36px;
+  font-size: 15px;
+  line-height: 22px;
   background-image: url(${searchIcon});
   background-size: 24px 24px;
   background-repeat: no-repeat;
   background-position: center left 10px;
-
-  &::placeholder {
-    font-size: 15px;
-    line-height: 22px;
-  }
 `

packages/DApp/src/components/votes/VotingCards.tsx

@@ -11,20 +11,29 @@ import { Colors } from '../../constants/styles'
 import { useConfig } from '../../providers/config'
 import { VotingCardSkeleton } from './VotingCardSkeleton'
 import { VotingCard } from './VotingCard'
+import { Search } from '../Input'
 
 export function VotingCards() {
   const { config } = useConfig()
   const [sortedBy, setSortedBy] = useState(VotingSortingEnum.EndingSoonest)
   const [voteType, setVoteType] = useState('')
+  const [filterKeyword, setFilterKeyword] = useState('')
   const { communities, loading } = useCommunities(getCommunitiesUnderVote, {
     numberPerPage: config.numberPerPage,
     sortedBy,
     voteType,
+    filterKeyword,
   })
 
   return (
     <div>
       <PageBar>
+        <Search
+          type="text"
+          placeholder="Search communities..."
+          value={filterKeyword}
+          onChange={(e) => setFilterKeyword(e.currentTarget.value)}
+        />
         <VoteFilter>
           <span>Vote types:</span>
           <VoteType className={voteType == '' ? 'selected' : 'notSelected'} onClick={() => setVoteType('')}>