From 1c517aa5f0c67463f9d70f226080f217dde71f50 Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Wed, 23 Jun 2021 10:31:45 +0900
Subject: [PATCH] moving search operations to /explore

---
 source/src/components/Navbar.tsx    | 16 +++++++-
 source/src/components/SearchBox.tsx | 61 -----------------------------
 2 files changed, 14 insertions(+), 63 deletions(-)
 delete mode 100644 source/src/components/SearchBox.tsx

diff --git a/source/src/components/Navbar.tsx b/source/src/components/Navbar.tsx
index 4a4ce99..eec0718 100644
--- a/source/src/components/Navbar.tsx
+++ b/source/src/components/Navbar.tsx
@@ -9,9 +9,9 @@ import { isMobile } from "react-device-detect"
 import theming from "../theming"
 import NavbarData from "../data/NavbarData"
 
-import SearchBox from "./SearchBox"
 import Sidebar from "./Sidebar"
 import ThemeToggleButton from "./ThemeToggleButton"
+import { faSearch } from "@fortawesome/free-solid-svg-icons"
 
 const StyledNav = styled.nav`
 	position: absolute;
@@ -102,7 +102,19 @@ export default class Navbar extends React.Component {
 						</ReactTooltip>
 					)}
 
-					<SearchBox />
+					<StyledALink
+						data-tip
+						data-for="search"
+						href={`${process.env.PUBLIC_URL}/explore`}
+					>
+						<FontAwesomeIcon icon={faSearch} />
+					</StyledALink>
+					{!isMobile && (
+						<ReactTooltip id="search" type="dark" effect="solid">
+							<span>Search</span>
+						</ReactTooltip>
+					)}
+
 					<Sidebar />
 				</StyledContainer>
 			</StyledNav>
diff --git a/source/src/components/SearchBox.tsx b/source/src/components/SearchBox.tsx
deleted file mode 100644
index 442468f..0000000
--- a/source/src/components/SearchBox.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from "react"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faSearch } from "@fortawesome/free-solid-svg-icons"
-import styled from "styled-components"
-
-import theming from "../theming"
-
-const StyledSearchBoxContainer = styled.div`
-	display: flex;
-	justify-content: left;
-	margin: 0.5rem;
-	align-items: center;
-	background-color: ${(props) =>
-		theming.theme(props.theme.currentTheme, {
-			light: "whitesmoke",
-			dark: "#2F3136",
-		})};
-	color: ${(props) =>
-		theming.theme(props.theme.currentTheme, {
-			light: "black",
-			dark: "#CFD0D0",
-		})};
-
-	&:hover {
-		background-color: ${(props) =>
-			theming.theme(props.theme.currentTheme, {
-				light: "#eeeeee",
-				dark: "#36393F",
-			})};
-	}
-`
-
-const StyledSearchBox = styled.input`
-	width: 80%;
-	border: none;
-	border-right: 1rem;
-	outline: none;
-	padding: 10px 10px;
-	text-decoration: none;
-	background-color: inherit;
-	color: inherit;
-`
-
-const StyledSearchButton = styled(FontAwesomeIcon)`
-	cursor: pointer;
-`
-
-export default class Navbar extends React.Component {
-	render() {
-		return (
-			<StyledSearchBoxContainer>
-				<StyledSearchBox
-					type="text"
-					name="search"
-					placeholder="Search"
-				/>
-				<StyledSearchButton icon={faSearch} />
-			</StyledSearchBoxContainer>
-		)
-	}
-}