diff --git a/src/components/App.tsx b/src/components/App.tsx index 02d415b..be5ba27 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -4,6 +4,7 @@ import Quick from "./Quick"; import QuickItem from "./QuickItem"; import QuickCategory from "./QuickCategory"; import Clock from "./Clock"; +import Search from "./Search"; class App extends React.Component { constructor(props) { @@ -14,6 +15,7 @@ class App extends React.Component { return
+ diff --git a/src/components/Search.tsx b/src/components/Search.tsx new file mode 100644 index 0000000..e8c88ff --- /dev/null +++ b/src/components/Search.tsx @@ -0,0 +1,43 @@ +import * as React from "react"; + +import "../style/search.scss"; + +class Search extends React.Component { + + private searchInput = React.createRef() + + constructor(props) { + super(props); + } + + handleQuery(query: string) { + this.search(query); + } + + search(query: string){ + const url = new URL("https://duckduckgo.com/"); + const param = new URLSearchParams(); + param.append("q",query); + url.search = param.toString(); + window.location.href = url.toString(); + } + + onKeyDown(event: React.KeyboardEvent) { + if (event.key === 'Enter') { + this.handleQuery(this.searchInput.current.value); + } + } + + render(): JSX.Element { + return
+ this.onKeyDown(e)} + ref={this.searchInput} + /> +
; + } + +} + +export default Search; diff --git a/src/style/search.scss b/src/style/search.scss new file mode 100644 index 0000000..5b0c9a6 --- /dev/null +++ b/src/style/search.scss @@ -0,0 +1,12 @@ +.search-component{ + + text-align: center; + margin-top: 2em; + margin-bottom: 2em; + + input[type=text]{ + width: 40%; + border: none; + padding: 0.5em 1.5em; + } +} \ No newline at end of file