status-im
/
status-tutorials
mirror of https://github.com/status-im/status-tutorials.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add a search box icon

This commit is contained in:
jinhojang6 2020-06-23 00:47:04 +09:00
parent bd4decc4e2
commit 7356a0792d
4 changed files with 53 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -24,6 +24,9 @@
"clean": "rm -fr out"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.29",
"@fortawesome/free-solid-svg-icons": "^5.13.1",
"@fortawesome/react-fontawesome": "^0.1.11",
"@types/react-burger-menu": "^2.6.1",
"@zeit/next-bundle-analyzer": "^0.1.2",
"@zeit/next-css": "^1.0.1",

8
public/static/css/main.scss
View File

@ -117,8 +117,7 @@ li {
}
.search-bar {
margin-top: 20px;
margin-left: 25px;
margin-left: 15px;
width: 220px;
height: 30px;
border: 2px solid #979797;
@ -129,6 +128,11 @@ li {
color: #e7e7e7;
}
.searchIcon {
margin-left: 25px;
font-size: 25px;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #b4b4b4;
padding-left: 2px;

27
src/Components/Blogs/SearchBox.tsx
View File

@ -1,6 +1,8 @@
import React, { useState, useEffect } from "react";
import { useDispatch } from "react-redux";
import { HomeActions } from "@Actions";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faSearch } from '@fortawesome/free-solid-svg-icons'
const SearchBox = (data: any) => {
@ -17,15 +19,22 @@ const SearchBox = (data: any) => {
return (
<>
<div>
<input
type="text"
className="search-bar"
placeholder="Author or title.."
onChange={handleChange}
>
</input>
</div>
<div style={{ display: 'inline-flex', alignItems: 'center', marginTop: '25px', marginBottom: '10px' }}>
<div>
<FontAwesomeIcon icon={faSearch} color="grey" className="searchIcon"/>
</div>
<div>
<input
type="text"
className="search-bar"
placeholder="Author or title.."
onChange={handleChange}
>
</input>
</div>
</div>
</>
)
}

26
yarn.lock
View File

@ -1466,6 +1466,32 @@
resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
"@fortawesome/fontawesome-common-types@^0.2.29":
version "0.2.29"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.29.tgz#e1a456b643237462d390304cab6975ff3fd68397"
integrity sha512-cY+QfDTbZ7XVxzx7jxbC98Oxr/zc7R2QpTLqTxqlfyXDrAJjzi/xUIqAUsygELB62JIrbsWxtSRhayKFkGI7MA==
"@fortawesome/fontawesome-svg-core@^1.2.29":
version "1.2.29"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.29.tgz#34ef32824664534f9e4ef37982ebf286b899a189"
integrity sha512-xmPmP2t8qrdo8RyKihTkGb09RnZoc+7HFBCnr0/6ZhStdGDSLeEd7ajV181+2W29NWIFfylO13rU+s3fpy3cnA==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.29"
"@fortawesome/free-solid-svg-icons@^5.13.1":
version "5.13.1"
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.1.tgz#010a846b718a0f110b3cd137d072639b4e8bd41a"
integrity sha512-LQH/0L1p4+rqtoSHa9qFYR84hpuRZKqaQ41cfBQx8b68p21zoWSekTAeA54I/2x9VlCHDLFlG74Nmdg4iTPQOg==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.29"
"@fortawesome/react-fontawesome@^0.1.11":
version "0.1.11"
resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.11.tgz#c1a95a2bdb6a18fa97b355a563832e248bf6ef4a"
integrity sha512-sClfojasRifQKI0OPqTy8Ln8iIhnxR/Pv/hukBhWnBz9kQRmqi6JSH3nghlhAY7SUeIIM7B5/D2G8WjX0iepVg==
dependencies:
prop-types "^15.7.2"
"@icons/material@^0.2.4":
version "0.2.4"
resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"