From 9a84a041573bcbad5fccef55bfbf3be3dfd2f583 Mon Sep 17 00:00:00 2001
From: Niklas <niklas@kapelle.org>
Date: Thu, 23 Apr 2020 02:56:19 +0200
Subject: [PATCH] added serach component

---
 src/components/App.tsx    |  2 ++
 src/components/Search.tsx | 43 +++++++++++++++++++++++++++++++++++++++
 src/style/search.scss     | 12 +++++++++++
 3 files changed, 57 insertions(+)
 create mode 100644 src/components/Search.tsx
 create mode 100644 src/style/search.scss

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 <div>
 			<div className="center-wrapper">
 				<Clock/>
+				<Search/>
 				<Quick>
 					<QuickCategory name="Productivity">
 						<QuickItem name="Nextcloud" url="#"/>
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<HTMLInputElement>()
+
+	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 <div className="search-component" >
+			<input type="text" 
+				autoFocus
+				onKeyDown={(e)=>this.onKeyDown(e)}
+				ref={this.searchInput}
+				/>
+		</div>;
+	}
+
+}
+
+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