Skip to content

Commit 9be41ae

Browse files
ben221199ben221199
committed
Add searchbar
1 parent bbac2c3 commit 9be41ae

5 files changed

Lines changed: 101 additions & 0 deletions

File tree

‎src/SearchPage.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import {JSX} from "react";
2+
3+
function SearchPage(): JSX.Element{
4+
return <div>TODO Search</div>;
5+
}
6+
7+
export default SearchPage;

‎src/components/CustomSVG.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,39 @@ function CustomSVG({icon,viewBox,style}): JSX.Element {
9696
</g>
9797
);
9898
}
99+
if(icon==='publish'){
100+
element = (
101+
<g fill="none" fillRule="evenodd" strokeLinecap="round">
102+
<path
103+
d="M8, 18 L5, 18 L5, 18 C2.790861, 18 1, 16.209139 1, 14 C1, 11.790861 2.790861, 10 5, 10 C5.35840468, 10 5.70579988, 10.0471371 6.03632437, 10.1355501 C6.01233106, 9.92702603 6, 9.71495305 6, 9.5 C6, 6.46243388 8.46243388, 4 11.5, 4 C14.0673313, 4 16.2238156, 5.7590449 16.8299648, 8.1376465 C17.2052921, 8.04765874 17.5970804, 8 18, 8 C20.7614237, 8 23, 10.2385763 23, 13 C23, 15.7614237 20.7614237, 18 18, 18 L16, 18"
104+
strokeLinejoin="round"
105+
/>
106+
<path d="M12, 13 L12, 21"/>
107+
<polyline
108+
strokeLinejoin="round"
109+
transform="translate(12.000000, 12.500000) scale(1, -1) translate(-12.000000, -12.500000)"
110+
points="15 11 12 14 9 11"
111+
/>
112+
</g>
113+
);
114+
}
115+
if (icon === 'search') {
116+
element = (
117+
<g>
118+
<circle cx="11" cy="11" r="8"/>
119+
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
120+
</g>
121+
);
122+
}
123+
if(icon==='settings'){
124+
element = (
125+
<g>
126+
<circle cx="12" cy="12" r="3"/>
127+
<path
128+
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
129+
</g>
130+
);
131+
}
99132

100133
return (
101134
<svg viewBox={viewBox} style={style}>

‎src/components/Header.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,13 @@ function Header(): JSX.Element {
99

1010
const navigate: NavigateFunction = useNavigate();
1111

12+
function handleSubmitSearch(event): boolean{
13+
event.preventDefault();
14+
const input: HTMLInputElement = event.target.elements[0];
15+
navigate(`/search?q=${encodeURIComponent(input.value)}`,{});
16+
return false;
17+
}
18+
1219
return (
1320
<header>
1421
<div style={{
@@ -26,6 +33,7 @@ function Header(): JSX.Element {
2633
height: '40px',
2734
textAlign: 'center',
2835
verticalAlign: 'middle',
36+
marginRight:'10px',
2937
width: '40px'
3038
}}>
3139
<CustomSVG icon="menu" viewBox="0 0 24 24" style={{height: '16px', padding: '12px 0'}}/>
@@ -71,6 +79,49 @@ function Header(): JSX.Element {
7179
<CustomSVG icon="arrow-right" viewBox="0 0 24 24"
7280
style={{height: '18px', padding: '11px 0'}}/>
7381
</NavLink>
82+
<div style={{display: 'inline-block', height: '40px'}}>
83+
<form onSubmit={handleSubmitSearch} style={{height:'100%',marginRight:'10px',position:'relative'}}>
84+
<CustomSVG icon="search" style={{fill:'transparent',height:'100%',left:'10px',position:'absolute',stroke:'white',strokeWidth:'2px',verticalAlign:'middle',width:'16px'}} viewBox="0 0 24 24"/>
85+
<input placeholder="Search" style={{
86+
backgroundColor: 'rgba(45, 45, 45, 0.7)',
87+
border: 'none',
88+
borderRadius: '6px',
89+
color: 'rgb(253, 253, 253)',
90+
fontSize: '13px',
91+
height: '38px',
92+
paddingLeft: '35px',
93+
paddingRight: '10px',
94+
verticalAlign:'middle',
95+
width:'480px',
96+
}}/>
97+
</form>
98+
</div>
99+
<NavLink className="hoverHeaderButtonFill" to={null} style={{
100+
backgroundColor: 'rgba(45, 45, 45, 0.7)',
101+
borderRadius: '1.5rem',
102+
display: 'inline-block',
103+
height: '40px',
104+
marginRight: '10px',
105+
textAlign: 'center',
106+
verticalAlign: 'middle',
107+
width: '40px'
108+
}}>
109+
<CustomSVG icon="publish" viewBox="0 0 24 24"
110+
style={{height: '18px', padding: '11px 0',strokeWidth:'2px'}}/>
111+
</NavLink>
112+
<NavLink className="hoverHeaderButtonFill" to={null} style={{
113+
backgroundColor: 'rgba(45, 45, 45, 0.7)',
114+
borderRadius: '1.5rem',
115+
display: 'inline-block',
116+
height: '40px',
117+
marginRight: '10px',
118+
textAlign: 'center',
119+
verticalAlign: 'middle',
120+
width: '40px'
121+
}}>
122+
<CustomSVG icon="settings" viewBox="0 0 24 24"
123+
style={{height: '18px', padding: '11px 0',fill:'transparent',strokeWidth:'2px'}}/>
124+
</NavLink>
74125
</div>
75126
<div style={{justifyContent: 'flex-end'}}>
76127
<Link className="hoverHeaderButton" style={{

‎src/main.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,14 @@ header{
4242
opacity: .3;
4343
}
4444

45+
header input:hover{
46+
outline: #52525B solid 2px;
47+
}
48+
49+
header input:focus-visible{
50+
outline:rgb(43, 187, 144) solid 2px;
51+
}
52+
4553
main{
4654
margin:16px;
4755
}

‎src/main.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import App from './App';
66
import AppRouter from './AppRouter';
77
import ClaimPage from "./ClaimPage";
88
import NotFound from './NotFound';
9+
import SearchPage from "./SearchPage";
910
import SettingsPage from "./SettingsPage";
1011
import WalletPage from "./WalletPage";
1112
import Footer from "./components/Footer";
@@ -25,6 +26,7 @@ const element: ReactElement = (
2526
<Route path="/about" element={<App/>}/>
2627
<Route path="/claim/*" element={<ClaimPage/>}/>
2728
<Route path="/wallet" element={<WalletPage/>}/>
29+
<Route path="/search" element={<SearchPage/>}/>
2830
<Route path="/settings" element={<SettingsPage/>}/>
2931
<Route path="*" element={<NotFound/>}/>
3032
</Routes>

0 commit comments

Comments
 (0)