From 8e2cd843a17ab77fe6f811d3aedfecb21d459f8c Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Mon, 8 Feb 2021 18:09:57 +0100
Subject: added really epic search bar

---
 components/navbar.tsx |  3 +--
 components/ui.tsx     |  2 ++
 pages/search.tsx      | 38 ++++++++++++++++++++++++++++++++++++++
 styles/global.css     |  4 ++++
 4 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 pages/search.tsx

diff --git a/components/navbar.tsx b/components/navbar.tsx
index c62965a..275de07 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -26,7 +26,6 @@ export class NavBar extends Component {
 	
 	constructor(props: {}) {
 		super(props);
-
 	}
 
 	render () {
@@ -55,7 +54,7 @@ export class NavBar extends Component {
 			<a href="/" style={NavBarItemStyle}><Home/></a>
 			<a href="/game" style={NavBarItemStyle}><VideogameAssetIcon/></a>
 			<a href="/" style={NavBarItemStyle}><ExtensionIcon/></a>
-			<a href="/" style={NavBarItemStyle}><SearchIcon/></a>
+			<a href="/search" style={NavBarItemStyle}><SearchIcon/></a>
 
 			<div style={{
 				position: "absolute",
diff --git a/components/ui.tsx b/components/ui.tsx
index f57a90a..3fb3c86 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -94,6 +94,7 @@ export function Input(props: {
 	min?: number;
 	max?: number;
 	value?: string|number;
+	dark?: boolean;
 }) {
 	return <input
 	id={props.id}
@@ -102,6 +103,7 @@ export function Input(props: {
 	placeholder={props.label}
 	spellCheck={false}
 	defaultValue={props.value ? String(props.value) : ""}
+	className={props.dark ? "dark" : "light"}
 	style={{
 		padding: 12,
 		border: 0,
diff --git a/pages/search.tsx b/pages/search.tsx
new file mode 100644
index 0000000..8aef64b
--- /dev/null
+++ b/pages/search.tsx
@@ -0,0 +1,38 @@
+import { Component } from 'react';
+
+import { NavBar } from '../components/navbar';
+import { Vierkant, Button, Input } from '../components/ui';
+import { CenteredPage, PageTitle } from '../components/page';
+
+import SearchOutlinedIcon from '@material-ui/icons/SearchOutlined';
+
+function SearchBar() {
+	return <Vierkant style={{ padding: 8 }} fullwidth>
+		<Input label="Zoeken voor gebruikers..." dark style={{
+			backgroundColor: "var(--background)",
+			color: "var(--text)",
+			padding: 14,
+			fontSize: 16,
+			width: "calc(100% - 48px - 14px * 2)"
+		}}/>
+		<Button style={{
+			padding: 12,
+			float: "right",
+			display: "inline-block",
+			borderRadius: 4
+		}}><SearchOutlinedIcon/></Button>
+	</Vierkant>
+}
+
+export default class HomePage extends Component {
+	render () {
+		return <div>
+			<NavBar/>
+			<CenteredPage width={802}>
+				<PageTitle>Zoeken</PageTitle>
+				<SearchBar/>
+			</CenteredPage>
+		</div>
+	}
+}
+
diff --git a/styles/global.css b/styles/global.css
index 0152efd..2a82fa2 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -75,3 +75,7 @@ input::placeholder {
 /* material-ui default state */
 svg.MuiSvgIcon-root { transition: none !important; }
 
+input::placeholder { opacity: .75; }
+input.dark::placeholder { color: var(--text); }
+input.light::placeholder { color: var(--text-alt); }
+
-- 
cgit v1.2.3