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="#"/>

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;

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;
+	}
+}